追加到现有REACT表单模板属性值

Append to existing REACT Form template property values

提问人:AltF4Uninstall 提问时间:10/18/2023 更新时间:10/18/2023 访问量:10

问:

REACT 的新手,我正在尝试确定是否可以附加 REACT Form 控件属性值以添加其他功能。

如果您愿意,我创建了一个使用属性验证的验证模板。这样做是为了使不必为每个需要验证的日期控件键入所有验证代码。

export const date_max_validation = {
    name: 'dateEntry',
    label: 'Date Entry',
    type: 'date',
    id: 'dateEntry',
    placeholder: 'Enter or select a date...',
    style: DATE_STYLE,
    validate: validateFormInput,
    validation: {
        required: {
            value: true,
            message: 'A valid date is required!',
        },
        isDate: {
          message: 'Not a valid date!',  
        },
        isDateMax: {
            value: 36525, // value in days
            message: 'Date must be less than 100 years ago!',
        },
    },
}

该模板运行良好,但有时我需要向控件添加额外的验证,并希望能够在窗体上将附加验证附加到当前验证的末尾。现在,下面的代码只是覆盖了模板验证属性中的内容。

<FormTextInput {...date_max_validation} 
     label="What day do you leave?"
     id={FormFieldId.StartDate}
     name={FormFieldId.StartDate}
     value={values[FormFieldId.StartDate]}
     handleInputChange={this.onChangeInput}
     validation= {{
          validate: {
          value: () => isLessOrEqual(this.state.values[FormFieldId.StartDate], this.state.values[FormFieldId.EndDate]),
          message: 'Start date must be less than or equal to end date.'
          }
     }}
/>

有没有办法将额外的属性验证附加到模板中存储的当前验证的末尾?

JavaScript ReactJS 表单 模板 属性

评论


答:

0赞 AltF4Uninstall 10/18/2023 #1

我能够通过在 validate 末尾添加一个指向模板的扩展运算符,然后指向其验证属性来使追加工作。

...date_max_validation.validation

代码现在如下所示

<FormTextInput {...date_max_validation} 
    label="What day do you leave?"
    id={FormFieldId.StartDate}
    name={FormFieldId.StartDate}
    value={values[FormFieldId.StartDate]}
    handleInputChange={this.onChangeInput}
    validation= {{
         validate: {
         value: () => isLessOrEqual(this.state.values[FormFieldId.StartDate], this.state.values[FormFieldId.EndDate]),
         message: 'Start date must be less than or equal to end date.'
         }, ...date_max_validation.validation
    }}
/>