重置/清除 antd RangePicker (React)

Question

我有一个像这样的组件，我试图在用户选择日期后说明清楚。默认情况下，用户选择一个日期后，它只是停留在选择的日期，用户需要手动重置它。

默认行为：

期望的行为：

import { DatePicker } from 'antd';
import moment from 'moment';

const { RangePicker } = DatePicker;

function onChange(dates, dateStrings) {
  console.log('From: ', dates[0], ', to: ', dates[1]);
  console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
}

ReactDOM.render(
  <>
    <RangePicker
      ranges={{
        Today: [moment(), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
      }}
      onChange={onChange}
    />
    <br />
    <RangePicker
      ranges={{
        Today: [moment(), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
      }}
      showTime
      format="YYYY/MM/DD HH:mm:ss"
      onChange={onChange}
    />
  </>,
  mountNode,
);

所以我尝试使用 antd API 中的“值”，使用 state 设置值并在每次用户选择日期时使用 SetState 擦除它（OnChange()） - 不起作用。 还尝试在 antd RangePicker.js 中找到清除按钮功能 - 但发现它对我来说太复杂了）：.

有人知道怎么解决吗？ 提前谢谢你（：。

Answer 1

解决它的一个简单方法是remounting 组件。

例如，假设我们有一个变量someValue，其中包含一些值，我们将值分配给反应组件的key。

<RangePicker key={someValue} ... />

在您第二次更改日期时，只需将 key 设置为其他值。随着这个值的变化，React 将检测到一个新的键并重新挂载该组件，从而清除其之前存储的所有本地状态。

编辑 1

我注意到您有两个日期选择器，在这种情况下，您需要为这两个范围选择器设置两个变量。例如：

let key1 = 0;
let key2 = 0;
....
<RangePicker key={key1} ../>
<RangePicker key={key2} .. onChange={() => {
   // all the change related to onchange
   //set new values for key1 and key2 
   setKey2(key1++); setKey2(key2++);
}}/>

P.S：您在所有更改的最后一次重新安装组件，否则它会尝试在未安装的组件上发送更新。