Копировать ввод формы ТОЛЬКО при установленном флажке — Реагировать на форму крючка

#reactjs #typescript #forms #react-hook-form

Вопрос:

Я пытаюсь создать две формы, в которых вторая форма копирует входные данные из первой, когда установлен флажок.

Я наткнулся на этот код из библиотеки форм React Hook, однако, даже если флажок НЕ установлен, вторая форма все равно копирует входные данные из первой.

Я пытался это исправить, но не могу найти, что не так с кодом.

Вот ЦСУ: https://codesandbox.io/s/cool-dew-1pvsw?file=/src/Contact.tsx

Ввод Формы Копирования

Ответ №1:

Вы совершаете ошибку при копировании значения флажка. вот обновление кода.

 const Contact = ({
  email,
  email2,
  checked,
  setChecked
}: {
  email: string;
  email2: string;
  checked: boolean;
  setChecked: (checked: boolean) => void;
}) => {
  const { handleSubmit, register, setValue, watch } = useForm({
    defaultValues: { email: email, email2: email2, checky: checked // 1- Add checkbox to form }
  });
  const onSubmit = (values) => console.log(values);
  const watchEmail = watch("email", email);
  const checkbox = watch("checky", checked); // const checkbox = watch("checkbox", email); you're assiging wrong value to checkbox
......
 

Комментарии:

1. Огромное спасибо. Это сработало. Как насчет того, чтобы формы состояли из двух отдельных компонентов? — codesandbox.io/s/distracted-clarke-9m8bo?file=/src/App.tsx

2. Либо вам нужно использовать глобальное хранилище, например (API/Redux контекста реакции или любое другое), либо вам нужно перенести свое состояние в родительский компонент.

3. @L. Диас Примите решение в качестве ответа, если оно сработало для вас. Это может увеличить охват, а также помочь кому-то другому найти решение.