ユーザーが反応日付の日付ピッカーカレンダーの外をクリックすると、何かが起こるキャンセル機能を実装しようとしています。
私のカレンダー コンポーネントでは、2 つのプロパティの状態をstartDate
設定していますendDate
がendDate
、状態は設定されません。ブレークポイントを追加すると、これにヒットして値を設定しようとすることがわかります。更新中の状態のコールバック関数を追加すると、これが実行されないため、解決できない奇妙なことが起こっています。
状態が更新されないのはなぜですか? コンソールにエラーはありません。
私のカレンダーコンポーネントのコード例:
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
、 の値が見つかりません。に問題はありません。設定をコメントアウトすると、うまく設定されます。endDate
setState
onDatesChange
startDate
startDate
endDate
私はとても混乱しています...