0

ユーザーが反応日付の日付ピッカーカレンダーの外をクリックすると、何かが起こるキャンセル機能を実装しようとしています。

私のカレンダー コンポーネントでは、2 つのプロパティの状態をstartDate設定していますendDateendDate、状態は設定されません。ブレークポイントを追加すると、これにヒットして値を設定しようとすることがわかります。更新中の状態のコールバック関数を追加すると、これが実行されないため、解決できない奇妙なことが起こっています。

状態が更新されないのはなぜですか? コンソールにエラーはありません。

私のカレンダーコンポーネントのコード例:

onDatesChange = ({ startDate, endDate }) => {
    this.setState({ startDate, endDate });
    if (startDate && endDate) {
        this.props.onDatesPicked(startDate.format('YYYY-MM-DD'), endDate.format('YYYY-MM-DD'));
    }
};

onClose = () => {
    const { startDate, endDate } = this.state;
    if (!startDate || !endDate) {
        this.props.onCancel();
    }
};

render() {
    const { startDate, endDate, focusedInput } = this.state;

    return (
        <div className={css.component}>
            <DateRangePicker
                displayFormat="DD MMM YYYY"
                isOutsideRange={this.isOutsideRange}
                startDate={startDate}
                startDateId={START_DATE}
                startDatePlaceholderText="Start date"
                endDate={endDate}
                endDateId={END_DATE}
                endDatePlaceholderText="End date"
                onDatesChange={this.onDatesChange}
                focusedInput={focusedInput}
                onFocusChange={this.onFocusChange}
                firstDayOfWeek={1}
                hideKeyboardShortcutsPanel
                minimumNights={0}
                withPortal
                onClose={this.onClose}
            />
        </div>
    );
}

関数内で、が既に呼び出されて値が渡されているにもかかわらずonClose、 の値が見つかりません。に問題はありません。設定をコメントアウトすると、うまく設定されます。endDatesetStateonDatesChangestartDatestartDateendDate

私はとても混乱しています...

4

0 に答える 0