时间戳

首页 > 解决方案 > 处理具有许多字段的反应表单中的错误

reactjs - 处理具有许多字段的反应表单中的错误

问题描述

<Form.Input
            label="Name"
            type="text"
            value={this.state.name}
            onChange={this.handleChangeName}
            />
<Form.Input
            label="Age"
            type="number"
            value={this.state.age}
            onChange={this.handleChangeAge}
            />
<Form.Input
            label="Gender"
            type="text"
            value={this.state.gender}
            onChange={this.handleChangeGender}
            />
<Button
                className="primaryButton"
                onClick={this.onSave}
            >
            SAVE
            </Button>


handleChangeAge=(e,{value})=>{
   //Set the value to state if it is greater than 1 else show error message.
}


  handleChangeGender=(e,{value})=>{
 //I have some error handling here also
}

onSave=()=>{
//Highlight the fields with errors
}

我有一个如上所示的表单。我想根据某些条件验证表单的每个字段。如何处理每个字段的错误并在单击保存时显示它？

标签： reactjsreact-redux

解决方案

我的建议是使用适当的包来为您处理这种验证。如果你结合Formik你Yup最终得到一个非常一致的形式。您可以创建出色的验证Yup

形式： https ://jaredpalmer.com/formik/docs/api/formik

是的：https ://github.com/jquense/yup

:)

推荐阅读