Airbnb react日期返回null

Question

这是我实现的代码

<DayPickerRangeController
                startDate={startDate}
                startDateId="startDateId"
                endDate={endDate}
                endDateId="endDateId"
                onDatesChange={(date) => console.log(date)}
                focusedInput={focus}
                onFocusChange={(focus) => console.log(focus)}
              />

但是onDatesChange返回null

{startDate: null, endDate: null}

这是我的钩子

const [dateRange, setDateRange] = useState({
    startDate: null,
    endDate: null,
  });
  const [focus, setFocus] = useState(null);

const { startDate, endDate } = dateRange;

知道为什么吗？

这些是我的进口品

import 'react-dates/initialize';
import { DayPickerRangeController } from 'react-dates';

这是完整的代码

import 'react-dates/initialize';
import { DayPickerRangeController } from 'react-dates';

const DatePicker = ({ name, items, handler }) => {

  const [dateRange, setDateRange] = useState({
    startDate: null,
    endDate: null,
  });

  const [focus, setFocus] = useState(null);
  const { startDate, endDate } = dateRange;

  return (
    <DayPickerRangeController
       startDate={startDate}
       startDateId="startDateId"
       endDate={endDate}
       endDateId="endDateId"
       onDatesChange={(date) => console.log(date)}
       focusedInput={focus}
       onFocusChange={(focus) => console.log(focus)}
    />
  )
}

Answer 1

我已经在codesandbox中测试过它，并且似乎在onFocusChange变量结束为null后不会触发focus。

使用常量，如react dates 文档中描述的那样，而不是使用null.

const [focus, setFocus] = useState(START_DATE);
...
focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,

START_DATE, END_DATE常量可以很容易地导入：

import { START_DATE, END_DATE } from 'react-dates/constants';

Ps:当您选择范围时，focus变量将再次被赋予null值。为了再次选择值，我想最好重新设置所有的值(focus、startDate和endDate)。

更新：

我检查了它们的实现这里。很直截了当：

onFocusChange={(f) => {
        setFocus(!f ? START_DATE : f);
       }}