react-dates startDate和endDate为空，DayPickerRangeController

Question

这是来自react-dates的DayPickerRangeController组件

 <DayPickerRangeController
                    startDate={dates.startDate}
                    endDate={dates.endDate} 
                    onDatesChange={onDatesChange} 
                    focusedInput={focusedInput} 
                    onFocusChange={focusedInput => setFocusedInput(focusedInput)}
                    numberOfMonths={2} 
                />

我使用的是一个功能组件，默认状态是：

const [dates, setDates] = useState({ startDate: null, endDate: null });
const [focusedInput, setFocusedInput] = useState(null);

这是changeDates函数：

const onDatesChange = (dates) => {
    //setDates({ startDate, endDate });
    console.log(dates);
}

，但在日期更改时，结果是：{startDate: null, endDate: null}

我可以像这样将默认日期更改为invaling字符串：

const [dates, setDates] = useState({ startDate: 'jkhjkhjk', endDate: null });

和绑定更改事件{startDate: "jkhjkhjk", endDate: null}的结果

并显示日期无效值的警告

Answer 1

问题在于，文档对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