Ant Design Range Picker 在状态更新时不更新日期

Question

我对 Ant Design 组件有问题：日期选择器（范围选择器）。 [https://ant.design/components/date-picker/] 我将其与 React 和 hooks 一起使用。我需要能够通过单击按钮更改范围选择器内的日期。状态中的数据正在正确更新，但它不会更新日期选择器中的日期。我认为问题出在 Ant Design 用于日期选择器的 moment.js 库。在日期选择器中，日期值被包含在矩函数中。也许有一种方法可以在状态更改后手动更新组件？我弄错了什么吗？

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

Answer 1

你犯了几个错误：

您没有将 onChange 回调传递给 DatePicker 组件 - 这意味着您的 DatePicker 的输入不会传播到 DateSelect 组件
您使用的是 defaultValue 而不是 value，这不会让您在更新状态时更改父组件的值
你只保存了该州的一个日期，不过，我想，你想保存一个范围

我已经 fork 你的 codepen 并修复了它：https://codepen.io/anon/pen/VgJzER

Ant Design Range Picker 在状态更新时不更新日期

Ant Design Range Picker not updating date when state updates

javascript

reactjs

antd

react-hooks