Question

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

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

Answer 1

我的建议是使用适当的软件包为您处理这种验证。如果将Formik与Yup结合使用，则会得到非常一致的形式。您可以使用Yup

创建出色的验证

Formik：https://jaredpalmer.com/formik/docs/api/formik

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

：）

以具有多个字段的反应形式处理错误

1 个答案: