reactjs - 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}

这是我的钩子(Hook)

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中对其进行了测试，一旦focus变量最终为空，onFocusChange似乎不会被触发。

使用常量，如react-dates docs中所述，而不是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)

更新:

我检查了他们的实现here 。这非常简单:

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