react-datepickerで検証/制限を実装する方法

Question

react-datepickerコンポーネントで制限または検証を実装しようとしています。私は

https://redux-form.com/6.0.0-rc.1/examples/normalizing/

質問を（制限を実装する）検証と正規化のためReduxの形式を使用しています：私たちはで何かを入力しようとすると、Reduxの形式の正規化機能や検証機能でもないが呼び出されたことを観察しましたフィールド

我々はフォームを送信するが、私はいくつかの検証エラーを表示したり、無効な文字を入力してからユーザーを制限する必要がある場合、この値が提出されていないが。

私は日付ピッカーコンポーネント

Reduxのフィールドを介して日付ピッカーコンポーネントのラッパーを作り、自分の形でそれを使用： -

return (
     <div className={"render-date-picker "}> 
     <div className="input-error-wrapper"> 
      {(input.value) ? <label> {placeholder} </label> : ''} 
      <DatePicker className="input form-flow" {...input} 
      placeholderText={placeholder} 
      selected={input.value ? moment(input.value) : null} 
      maxDate={maxDate || null} 
      minDate={minDate || null} 
      dateFormat={isTimePicker ? "LLL" : "DD/MM/YYYY"} 
      showYearDropdown 
      showMonthDropdown 
      disabledKeyboardNavigation 
      /> 

      {touched && error && <span className="error-msg">{t(error)}</span>} 
      <span className="bar" style={{ 'display': this.state.is_focus ? 'block' : 'none' }} ></span> 
     </div> 
     </div> 
    ); 

Reduxのフォームフィールド： -

<Field 
name="date_of_birth" 
type="text" 
className="input form-flow extra-padding-datepicker" 
component={RenderDatePicker} 
maxDate={moment().subtract(18, "years")} 
validate={[required, dateOfBirth]} 
normalize={isValidDateFormat} 
placeholder={t("DOB (DD/MM/YYYY)")} 
/> 

私の正規化機能： -

Answer 1

react-datepickerは、onChangeRawプロパティを提供して、datePicker内で生の（型付きの）値を取得します。 datepicker入力フィールドを制限または検証するには、datepickerコンポーネントのonChangeイベントでは使用できない生の値が必要です。

それは一瞬のオブジェクトを返します - ：私たちはonChangeイベントを観察する場合、インスタンスのための

。私たちは生の値を単純にe.target.valueから得られるonChangeRaw

を使用し、生の値を取得するために

。 私の場合は、単にシンプルな機能でDatePickerの入力欄に何も入力からユーザーを制限： -

handleChange = (date) => { 
    let s=document.getElementById(date_picker_id) 
    s.value =moment(this.props.input.value).format("DD/MM/YYYY"); 
    } 

私のDatePickerのコンポーネント： -

<DatePicker 
..... 
disabledKeyboardNavigation 
onChangeRaw={(e)=>this.handleChange(e)} 
id={date_picker_id} 
..... 
/> 

これは私の問題を解決しました。希望はそれが便利です:)