#javascript #reactjs #formik
Вопрос:
Я использую react-formik
форму, у меня есть одна проблема с условием на основе флажка, проверка связи с двумя другими полями, если пользователь проверил, что скрытые поля показывают, что они скрыты, пользователь снял флажок, остальные два содержат значения, но я хочу, чтобы, если пользователь снял флажок, все поля были пустыми.
Мой код:
Спасибо за помощь
Ответ №1:
если вы хотите управлять значением одного поля на основе значения другого поля, вы можете воспользоваться setFieldValue
предоставленным Formik.
Field
Компоненты имеют поддержку визуализации, которая является функцией и которая помогает нам получить доступ setFieldValue
к ее аргументу. Теперь setFieldValue
, когда функция доступна, вы можете с ее помощью задавать значения зависимых полей, когда флажок установлен или снят.
Вам необходимо отобразить компонент поля для вашего флажка, как показано ниже
<Field
name="airconditioning"
render={({ meta, form }) => {
return (
<Checkbox
checked={meta.value}
onChange={(e) => {
const { checked } = e.target;
if (!checked) {
form.setFieldValue("airconditioningType", "");
form.setFieldValue("airconditioningStarred", "");
}
form.setFieldValue("airconditioning", checked || "");
}}
name="checkedB"
color="primary"
/>
);
}}
/>