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

Question

我为我们的日历control.Now使用了react-datetime，问题是，如果用户输入了一个无效的日期，比如'djfdjfhjkhdf‘，那么在这个控件中就没有什么可以模糊的了。我决定编写我自己的验证函数，并在validate.So事件上调用它，如果日期无效，则清除user.My代码输入的文本，如下所示：

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管理输入值。

请参阅文档的this part：

value -表示组件选择的日期，以便将其用作controlled component。此属性由Moment.js解析，因此可以使用date string或moment对象。

defaultValue -表示组件将其用作uncontrolled component的选定日期。此属性由Moment.js解析，因此可以使用date 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是空的:我已经能够用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 : ''} />
   }}
/>