单击清除按钮后reactjs清除日期输入答案

【问题标题】：reactjs clear date input after clicking clear button单击清除按钮后reactjs清除日期输入
【发布时间】：2021-10-12 06:55:42
【问题描述】：

我应该怎么做才能清除日期输入？，我有按钮，如果用户单击，它将清除日期。

  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("");
    setEndDate("");
  }

  <DateRangePickerComponent   placeholder='Select a range' change={onChangedate} 
              style={{paddingTop: 10, fontSize: 16}}
              />


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

【问题讨论】：

是DateRangePickerComponent 不受控制并坚持输入值的问题吗？
任何可运行的代码，如codesandbox或Jsfiddle或codepen？？
如果是第三方组件，请查看他们的文档。如果您是自己创建的，请自行处理。

标签： javascript reactjs

【解决方案1】：

我建议使用 React 键来“重置”不受控制的输入。当 React 键发生变化时，React 会丢弃旧版本并挂载一个新的“实例”。

请参阅fully uncontrolled component with a key 示例和更深入的解释。

const [key, setKey] = useState(false);

...

const handleClearfilter = () =>{
  setStartDate("");
  setEndDate("");
  setKey(k => !k); // toggle React key value
}

<DateRangePickerComponent
  key={key} // <-- attach React key
  placeholder='Select a range'
  change={onChangedate} 
  style={{paddingTop: 10, fontSize: 16}}
/>

【讨论】：

【解决方案2】：

如果你想控制组件，你必须自己输入值。文档显示您需要两个日期值，因为它是数据 range 输入。

  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("");
    setEndDate("");
  }

  <DateRangePickerComponent   placeholder='Select a range' change={onChangedate}   startDate={startDate} endDate={endDate}
              style={{paddingTop: 10, fontSize: 16}}
              />


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

【讨论】：