如何清除在 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

是的，如果您尝试在受控组件模式下传递 null 或 empty 值，则组件中显然存在渲染错误：内部输入仍然输入以前的值使用日历（不受控制？）尽管 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 : ''} />
   }}
/>
                                                

Answer 2

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

参见文档的this part：

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

defaultValue - 表示组件选择的日期以将其用作uncontrolled component。这个 prop 由 Moment.js 解析，因此可以使用日期 string 或 moment 对象。

---

看看我做的这个forked codepen。

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 事件似乎在第二次模糊时触发。不知道为什么会这样，但也许你会在文档中找到答案。以上只是对您现有代码的修复，希望是帮助您入门的有用指南。