[英]reactjs clear date input after clicking clear button
What should I do to clear date input?, I have button that if the user clicked, it will clear the date.我应该怎么做才能清除日期输入?我有一个按钮,如果用户单击它,它将清除日期。
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>
I suggest using a React key to "reset" the uncontrolled input.我建议使用 React 键来“重置”不受控制的输入。 When the React key changes React will throw away the old version and mount a new "instance".
当 React 键改变时,React 将丢弃旧版本并安装一个新的“实例”。
See fully uncontrolled component with a key for example and deeper explanation.例如,请参阅带有键的完全不受控制的组件和更深入的解释。
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}}
/>
If you want to control the component, you have to feed in the values yourself.如果你想控制组件,你必须自己输入值。 The docs show that you require two date values since it is a data range input.
文档显示您需要两个日期值,因为它是一个数据范围输入。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.