提问人:AltF4Uninstall 提问时间:10/18/2023 更新时间:10/18/2023 访问量:10
追加到现有REACT表单模板属性值
Append to existing REACT Form template property values
问:
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.'
}
}}
/>
有没有办法将额外的属性验证附加到模板中存储的当前验证的末尾?
答:
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
}}
/>
评论