蚂蚁设计范围选择器未更新状态时不更新日期

Question

我对蚂蚁设计组件有问题：date picker（range picker）。[https://ant.design/components/date-picker/]我正在将其与React和钩子一起使用。我需要通过单击按钮来更改范围选择器内部的日期。该州的数据正在正确更新，但没有更新日期选择器中的日期。我认为这个问题是在瞬间。在日期选择器中，日期值在内部矩函数内被包装。也许有一种方法可以在状态更改后手动更新组件？我遇到了什么问题吗？

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的输入不会传播到dateElect组件
2. 您使用的是defaultValue而不是value，当状态更新时，它不允许您从父组件更改值
3. 我想，您只保存一个日期，我想保存一个范围

我已经分配了您的编码词并修复了：https：//codepen.io/anon/pen/vgjzer