Удалить значение на основе условия React Formik в других полях

#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"
      />
    );
  }}
/>
 

Рабочая песочница