Средство выбора диапазона дизайна Ant не обновляет дату при обновлении состояния - PullRequest
Новая
       15

Средство выбора диапазона дизайна Ant не обновляет дату при обновлении состояния

0 голосов
/ 22 февраля 2019

У меня проблема с компонентом Ant Design: Date Picker (Range Picker).[https://ant.design/components/date-picker/] Я использую это с React и хуками.Мне нужно иметь возможность изменить дату внутри Range Picker, нажав на кнопку.Данные в состоянии обновляются должным образом, но они не обновляют дату в средстве выбора даты.Я думаю, что проблема связана с библиотекой moment.js, которую Ant Design использует для выбора даты.В средстве выбора даты значения даты заключаются в функции момента.Может быть, есть способ обновить компонент вручную после изменения состояния?Я что-то не так делаю?

const DateSelect = () => {
  const RangePicker = DatePicker.RangePicker;
  const dateFormat = 'YYYY/MM/DD';
  const [currentDate, setCurrentDate] = useState(moment().format(dateFormat));
  const addSevenDays = () => {
  const weekFromNow = moment()
      .add(1, 'w')
      .format(dateFormat);
    setCurrentDate(weekFromNow);
    console.log(currentDate);
  };
  return (
    <div>
      <Button onClick={addSevenDays}>Add 7 days</Button>
      <RangePicker
        defaultValue={[
          moment(currentDate, dateFormat),
          moment(currentDate, dateFormat),
        ]}
        format={dateFormat}
      />
      <span> {currentDate} </span>
    </div>
  );
};
render(<DateSelect />, document.getElementById('app'));

Вот кодекс для этой проблемы: https://codepen.io/anon/pen/rPEmPg?editors=0010

1 Ответ

0 голосов
/ 22 февраля 2019

Вы допустили несколько ошибок:

  1. вы не передаете обратный вызов onChange компоненту DatePicker - это означает, что входные данные вашего DatePicker не будут распространяться до компонента DateSelect
  2. вы используете defaultValue вместо value, что не позволяет вам изменить значение из родительского компонента; при обновлении состояния
  3. вы сохраняете только одну дату в состояниихотя, я полагаю, вы хотите сохранить диапазон

Я разветвил ваш код и исправил его: https://codepen.io/anon/pen/VgJzER

...