时间戳

首页 > 解决方案 > 状态更新时 Ant Design Range Picker 不更新日期

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

问题描述

我对 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

标签： javascriptreactjsantdreact-hooks

解决方案

你犯了几个错误：

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

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

推荐阅读