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

请参阅文档的this part：

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

defaultValue - 表示组件选定的日期，以便将其用作uncontrolled component。此道具由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事件似乎在第二次模糊时触发。不知道为什么会这样，但也许你会在文档中找到答案。以上只是对现有代码的修复，希望是一个有用的指导方针，可以帮助您入门。

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中输入的值？

2 个答案: