13

我正在为我们的日历控件使用 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
/>
4

2 回答 2

9

Yeah, there's clearly a rendering bug in component if you try to pass a null or empty value in controlled component mode: the internal input still got the former value entered with the calendar (uncontrolled ?) despite the fact that that.state.value is null : I've been able to "patch" it with the renderInput prop :

<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 : ''} />
   }}
/>
于 2020-11-23T16:28:45.490 回答
7

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

请参阅文档的这一部分：

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

defaultValue - 表示组件将其用作不受控制的组件的选定日期。该道具由 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().

I should note that the onBlur event seems to trigger on the 2nd blur. Not sure why that is, but perhaps the you'll find an answer in the docs. The above is only a fix to your existing code, and hopefully a useful guideline to get you started.

于 2017-09-05T11:32:18.243 回答