web-dev-qa-db-ja.com

反応日付ピッカーで検証/制限を実装する方法

react-datepicker コンポーネントに制限または検証を実装しようとしています。検証と正規化にredux-formを使用しています（制限を実装するため）

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

質問：フィールドに何かを入力しようとしたときにredux-formの正規化関数も検証関数も呼び出されないことを確認しました

date picker field

フォームを送信するときにこの値は送信されませんが、検証エラーを表示するか、ユーザーが無効な文字を入力できないようにする必要があります。

日付ピッカーコンポーネントのラッパーを作成し、それを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)")}
/>

私の正規化機能：-

export const isValidDateFormat = (value, previousValue) => {
    if (value == null || !value.isValid()) {
        return previousValue;
    }
    return value;
}
javascriptreactjsreduxredux-formreact-datepicker
10
Ayesha Mundu

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

たとえば、onChangeイベントを観察した場合：- enter image description here

モーメントオブジェクトを返します。

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

生の値は単にe.target.valueから取得されます。私の場合、単純な関数によって、ユーザーが日付ピッカー入力フィールドに何かを入力することを制限します：

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

私の日付ピッカーコンポーネント：-

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

これは私の問題を解決しました。それが役に立てば幸い:)

3
Ayesha Mundu