Обрабатывать ошибку в форме ответа, имеющей много полей

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

Yup: https://github.com/jquense/yup

:)