React中点击Clear按钮如何清空DateRangePicker日期输入值

你当前的实现没有将日期选择器组件绑定到对应的状态变量，属于非受控组件，修改状态无法同步到组件视图，按下面的方案调整即可：

核心修改点 #

• 给DateRangePickerComponent添加value属性，和你定义的startdate、endDate状态绑定，实现受控更新
• 清空逻辑里状态值和初始值保持一致，统一用undefined即可，避免类型不匹配的问题

修改后完整代码 #

// 这里调整了状态命名为统一的驼峰规范，你也可以直接沿用原来的命名
const [startDate, setStartDate] = useState();
const [endDate, setEndDate] = useState();

const onChangedate = (e) => {
    let startDate = convertDate(e.startDate);
    let endDate = convertDate(e.endDate);
    setStartDate(startDate);
    setEndDate(endDate);
}; 

const handleClearfilter = () =>{
  setStartDate(undefined);
  setEndDate(undefined);
}

// 新增value属性绑定状态
<DateRangePickerComponent   
  placeholder='Select a range' 
  change={onChangedate} 
  value={{startDate: startDate, endDate: endDate}}
  style={{paddingTop: 10, fontSize: 16}}
/>

<Button 
  onClick={handleClearfilter}
>
Clear All
</Button>

如果你的DateRangePickerComponent的value属性接收的参数格式和上述示例不同，按照组件要求的格式传入对应状态即可，只要保证状态更新时value属性的值同步更新，就能触发组件的清空渲染。

内容的提问来源于stack exchange，提问作者May Yie