如何在单击时清除按钮上的日期范围选择器值？

Question

这是我的代码，我有日期范围选择器和一个清除按钮。 当我单击清除按钮时，状态会发生变化（更改为空值）并且我想在 UI 中显示它。 如何设置日期范围选择器的值来显示它？

const [para, _setPara] = useState({
  startDate: null,
  endDate:null
} as any);

const onChange =(date:any, dateString:any) =>{
    setPara({
      startDate:date[0].format("YYYY-MM-DD HH:mm:ss"),
      endDate: date[1].format("YYYY-MM-DD HH:mm:ss")
    })
}

const clearSearch =()=>{
  setPara({
    startDate: null,
    endDate:null
  })
}

return(
<RangePicker onChange={onChange} allowClear={false} value={?} />
<Button
   type="primary"
   onClick={() => clearSearch()}
   danger
>
)

Answer 1

您在onChange获得的值与组件期望的格式相同，因此您需要将其保持原样并在需要时转换为字符串，或者将字符串保持在状态中并进行转换到每个渲染的正确格式。 您可以传递数组中的值

<RangePicker onChange={onChange} allowClear={false} value={[moment1,moment2]} />

要从字符串创建时刻，您需要导入moment并使用您正在使用的日期格式调用它：

import moment from 'moment';
...
const moment1=moment(startDate,"YYYY-MM-DD HH:mm:ss")

清除只是将两个时刻设置为null