Javascript 如何在react datepicker中实现验证/限制

我试图在组件中实现限制或验证。我正在使用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>
    );

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

---

react datepicker提供onChangeRaw属性以获取datepicker内的原始（类型化）值。为了限制或验证datepicker输入字段，我们需要原始值，该值在datepicker组件的onChange事件中不可用

例如，如果我们观察onChange事件：-

它返回一个矩对象

为了获得原始值，我们使用onChangeRaw

原始值仅从e.target.value获得。 在我的例子中，我只是通过一个简单的函数限制用户在datepicker输入字段中键入任何内容：-

export const isValidDateFormat = (value, previousValue) => {
    if (value == null || !value.isValid()) {
        return previousValue;
    }
    return value;
}

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

我的日期选择器组件：-

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>
    );

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

this.handleChangeRaw（e）}
id={date\u picker\u id}
.....
/>

---

这解决了我的问题。希望它有用：）

而不是不必要地访问DOM，只需将提供的合成事件与

date

及其currentTarget属性一起使用即可

handleChangeRaw=（date）=>{date.currentTarget.value=moment（this.props.input.value）.format（“DD/MM/yyyyy”）；}