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

Question

我正在为我们的日历使用 react-datetime control.Now 问题是如果用户输入了无效日期，例如 '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

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

参见文档的 this part：

value - Represents the selected date by the component, in order to use it as a controlled component. This prop is parsed by Moment.js, so it is possible to use a date string or a moment object.

defaultValue - Represents the selected date for the component to use it as a uncontrolled component. This prop is parsed by Moment.js, so it is possible to use a date string or a moment object.

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

Answer 2

是的，如果您尝试在受控组件模式下传递 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 : ''} />
   }}
/>

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

How to clear the value entered in react-datetime?

reactjs

react-datetime