Airbnb response-date возвращает ноль - PullRequest
Новая
       46

Airbnb response-date возвращает ноль

3 голосов
/ 24 марта 2020

Это код, который я реализовал 

<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)}
    />
  )
}

1 Ответ

2 голосов
/ 24 марта 2020

Я проверил это в codesandbox, и кажется, что onFocusChange не запускается, когда переменная focus становится нулевой.

Используйте константы, как описано в реагирующих датах документы , а не 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);
       }}
...