web-dev-qa-db-ja.com

react-datepickerに入力された値をクリアする方法は？

私は使っている react-datepickerカレンダーコントロール用。ここで問題となるのは、ユーザーが「djfdjfhjkhdf」のような無効な日付を入力した場合、このコントロールには検証するものが何もないということです。そこで、独自の検証関数を作成し、日付が無効な場合はblurイベントでそれを呼び出し、ユーザーが入力したテキストをクリアすることにしました。私のコードは次のようなものです：

import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
focousOut(value) {
 this.handleChange('');
}
handleChange(date) {
 this.setState({ selectedValue: date });
 this.setState({ startDate: date });
}

<DatePicker
 selected={this.state.selectedValue}
 value={this.state.startDate}
 onChange={this.handleChange}
 onBlur={event => this.focousOut(event.target.value)} />

validateDateは、日付が有効な場合はtrueまたはfalseを返す関数であり、日付が有効な場合はtrueを返します。それ以外の場合はfalseを返します。この要件をどのように達成できますか？私を助けてくれませんか？

reactjsreact-datepicker
6
Gorakh Nath

私は最初に解決策が次のようにコントロールを追加することを発見しました：

<DatePicker
   selected={this.state.selectedValue}
   value={this.state.startDate}
   onChange={this.handleChange}
   onChangeRaw={(event) =>
   this.handleChangeRaw(event.target.value)}
   onBlur={event => this.focousOut(event.target.value)}
  />

ここで、イベントに次のコードを追加します。

handleChangeRaw(value) {
 this.setState({ startDate: value });
}
handleChange(date) {
 this.setState({ selectedValue: date });
}
focousOut(value) {
if (!validateDate(value)) {
    this.setState({ startDate: '' });
    this.setState({ selectedValue: moment() });
   }
}

validateDateは、日付を検証するために使用する関数です。 falseが返された場合は、日付が無効であることを意味します。この場合、値を初期状態にリセットします。

2
Gorakh Nath