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

Question

我对 Ant Design 组件有疑问：日期选择器（范围选择器）。 [https://ant.design/components/date-picker/] 我将它与 React 和钩子一起使用。 我需要能够通过单击按钮来更改范围选择器内的日期。状态中的数据正在正确更新，但不会更新日期选择器中的日期。我认为问题在于 Ant Design 用于 Date Picker 的 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

你犯了几个错误：

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

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