Airbnb 反應日期返回 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

我已經在 codeandbox 中對其進行了測試，一旦focus變量最終為空，似乎onFocusChange就不會被觸發。

使用常量，如 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);
       }}