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

Question

REACT 新手，我正在尝试确定是否可以附加 REACT 表单控件属性值以添加附加功能。

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

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!',
        },
    },
}

模板工作完美，但有时我需要向控件添加额外的验证，并希望能够在表单上将附加验证附加到当前验证的末尾。现在，下面的代码只是覆盖模板 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.'
          }
     }}
/>

有什么方法可以将额外的属性验证附加到模板中存储的当前验证的末尾吗？

Answer 1

我可以通过在 validate 末尾添加一个扩展运算符来使 append 工作，该运算符指向模板，然后指向其验证属性。

...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
    }}
/>