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

Question

我在日历控件中使用了react-datetime，现在的问题是，如果用户输入了一个无效的日期，例如'djfdjfhjkhdf'，那么在此控件中就没有任何要验证的东西了，所以我决定编写自己的验证函数并在其上调用如果日期无效，则模糊事件，然后清除用户输入的文本。我的代码如下：-

import DatePicker from 'react-datetime';

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

<Datetime
  timeFormat={false}
  value={this.state.selectedValue}
  defaultValue={this.state.startDate}
  onChange={this.handleChange}
  onBlur={this.focousOut}
  locale='en-US'
  dateFormat
  closeOnSelect
/>

Answer 1

问题之一似乎是，基于给定的道具，您正在创建受控和非受控 Datetime组件的混合。基本上，value如果你想要一个状态控制的组件，或者defaultValue让 DOM 管理输入值，请使用。

请参阅文档的这一部分：

value - 表示组件选择的日期，以便将其用作受控组件。这个 prop 由 Moment.js 解析，所以可以使用日期string或moment对象。

defaultValue - 表示组件将其用作不受控制的组件的选定日期。这个 prop 由 Moment.js 解析，所以可以使用日期string或moment对象。

看看我制作的这个分叉的代码笔。

var date = new Date();

class App extends React.Component {
  constructor() {
    super();
    this.state = {selectedValue: ''};
    this.focousOut = this.focousOut.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  
  focousOut(value) {
    if(!moment(value).isValid()) {
     this.setState({selectedValue: ''}); 
    }
  }
  
  handleChange(date) {
   this.setState({ selectedValue: date });
  }

  render() {
    return (
       <Datetime
         timeFormat={false}
         value={this.state.selectedValue}
         onChange={this.handleChange}
         onBlur={this.focousOut}
         locale='en-US'
         dateFormat
         closeOnSelect
       />
    );
  }
}

React.render(<App />, document.body);

此外，您可以使用该moment.js库轻松确定字符串是否为有效的日期格式。只需使用moment().isValid().

我应该注意到该onBlur事件似乎在第二次模糊时触发。不知道为什么会这样，但也许您会在文档中找到答案。以上只是对您现有代码的修复，希望是帮助您入门的有用指南。

Answer 2

是的，如果您尝试在受控组件模式下传递null或空值，则组件中显然存在渲染错误：尽管 that.state.value 是null：我已经能够用 renderInput 道具“修补”它：

<Datetime
   value={(this.state.date) ? this.state.date : ''} 
   onChange={(value) => { this.setState{(date : ((value) && (isNaN(new Date(value)) === false)) ? new Date(value)).format('yyyy-mm-dd')  null, attribute) }} 
   renderInput={(props) => {
       return <input {...props} value={(this.state.date) ? props.value : ''} />
   }}
/>