![](/img/trans.png)
[英]react-dates DayPickerRangeController, is there a way to clean startDate or endDate if user clicks it when already selected?
[英]react-dates onDatesChange startDate and endDate are null, DayPickerRangeController
这是来自react-dates
的DayPickerRangeController
组件:
<DayPickerRangeController
startDate={dates.startDate}
endDate={dates.endDate}
onDatesChange={onDatesChange}
focusedInput={focusedInput}
onFocusChange={focusedInput => setFocusedInput(focusedInput)}
numberOfMonths={2}
/>
我正在使用功能组件,默认 state 是:
const [dates, setDates] = useState({ startDate: null, endDate: null });
const [focusedInput, setFocusedInput] = useState(null);
这是更改日期 function:
const onDatesChange = (dates) => {
//setDates({ startDate, endDate });
console.log(dates);
}
,但在日期更改时,结果是: {startDate: null, endDate: null}
我可以将默认日期更改为无效字符串,如下所示:
const [dates, setDates] = useState({ startDate: 'jkhjkhjk', endDate: null });
以及绑定更改事件的结果{startDate: "jkhjkhjk", endDate: null}
带有日期无效值的警告
问题是文档不清楚DayPickerRangeController
和所需的focusedInput
:
它必须是startDate
而不是null
:
const [focusedInput, setFocusedInput] = useState('startDate');
或从常数:
import { START_DATE, END_DATE } from 'react-dates/constants';
...
const [focusedInput, setFocusedInput] = useState(START_DATE);
并确保不是null
,就像选择endDate
后一样:
focusedInput={focusedInput || START_DATE} // startDate
工作演示:
https://codesandbox.io/s/react-dates-date-range-picker-forked-e8qne?file=/src/date-picker.jsx
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.