Как очистить значение, введенное в response-datetime?

Question

Я использую response-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 управлять входным значением.

Смотрите эту часть документации:

значение - представляет выбранную дату компонентом, чтобы использовать ее в качестве контролируемого компонента. Этот объект анализируется 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(),

Я должен отметить, что onBlur Похоже, что событие срабатывает на втором размытии. Не уверен, почему это так, но, возможно, вы найдете ответ в документации. Выше приведено только исправление существующего кода и, надеюсь, полезное руководство для начала работы.

Answer 2

Да, явно есть ошибка рендеринга в компоненте, если вы пытаетесь передать нулевое или пустое значение в режиме управляемого компонента: внутренний ввод все еще имеет прежнее значение, введенное с календарем (неконтролируемое?), Несмотря на тот факт, что 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 : ''} />
   }}
/>