React Hook Form Controller Проблемы - PullRequest
Новая
       21

React Hook Form Controller Проблемы

2 голосов
/ 28 апреля 2020

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

У меня проблема с моим пользовательским компонентом ввода, обновляющим состояние React, но не обновляющим ref внутри состояния формы. Таким образом, обязательное поле всегда помечается как недействительное, и я не могу отправить свою форму.

Вот демонстрация моей проблемы: https://codesandbox.io/s/react-hook-form-controller-bofv5

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

1 Ответ

3 голосов
/ 29 апреля 2020

Я думаю, что сузил вашу проблему. Сначала я удалил rules={{ required: true }} из контроллера и попробовал форму. Он сказал мне firstName: undefined. Затем я закомментировал атрибут onChange. После этого форма работает нормально. Кажется, что onChange следует использовать, если вы хотите предоставить пользовательский экстрактор значений. Значение должно быть возвращено из функции. Пример простого ввода может быть таким: onChange={([{target}]) => target.value} reference . Кроме того, важно отметить, что handleSubmit извлекает некоторое внутреннее состояние со значениями, например, вам не нужно отслеживать их самостоятельно.

Этот обновленный компонент работает: 

function App() {
  const { control, handleSubmit, errors } = useForm();
  // const [data, setData] = useState({ firstName: "" });

  const onSubmit = data => console.log(data);

  // const onChangeHandler = e => {
  //   const { name, value } = e.target;
  //   const _data = { ...data };
  //   _data[name] = value;
  //   setData(_data);
  // };

  return (
    <>
      {/* <p>{JSON.stringify(data)}</p> */}
      <form onSubmit={handleSubmit(onSubmit)}>
        <Controller
          as={Input}
          name="firstName"
          id="firstName"
          label="First Name"
          control={control}
          // value={data.firstName}
          rules={{ required: true }}
          errors={errors.firstName}
          // onChange={([e]) => onChangeHandler(e)}
        />

        <input type="submit" />
      </form>
    </>
  );
}

Еще одно замечание: я никогда не работал с этой библиотекой, поэтому доверяйте мне настолько, насколько вы можете меня бросить.

...