reactjs - 如何清除在react-datepicker中输入的值？

我将react-datepicker用于我们的日历控件。现在的问题是，如果用户输入的日期无效，例如“djfdjfhjkhdf”，则在此控件中没有可以验证的日期。因此，我决定编写自己的验证函数，如果日期无效，则在模糊事件中调用该函数，然后清除用户输入的文本。我的代码是这样的:

import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
focousOut(value) {
 this.handleChange('');
}
handleChange(date) {
 this.setState({ selectedValue: date });
 this.setState({ startDate: date });
}

<DatePicker
 selected={this.state.selectedValue}
 value={this.state.startDate}
 onChange={this.handleChange}
 onBlur={event => this.focousOut(event.target.value)} />

validateDate是一个将返回true或false的函数，如果日期有效，则返回true，否则返回false。我怎样才能达到这一要求，请您能帮助我吗？

最佳答案

我发现解决方案首先将控件添加为:

<DatePicker
   selected={this.state.selectedValue}
   value={this.state.startDate}
   onChange={this.handleChange}
   onChangeRaw={(event) =>
   this.handleChangeRaw(event.target.value)}
   onBlur={event => this.focousOut(event.target.value)}
  />

现在，为该事件添加以下代码:

handleChangeRaw(value) {
 this.setState({ startDate: value });
}
handleChange(date) {
 this.setState({ selectedValue: date });
}
focousOut(value) {
if (!validateDate(value)) {
    this.setState({ startDate: '' });
    this.setState({ selectedValue: moment() });
   }
}

validateDate是用于验证日期的函数。如果返回false，则表示无效日期，在这种情况下，将值重置为初始状态。

关于reactjs - 如何清除在react-datepicker中输入的值？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46035634/