web-dev-qa-db-fra.com

React Problèmes de contrôleur de formulaire Hook

J'utilise la bibliothèque de formulaires réactifs avec des éléments natifs, mais je souhaite passer à des composants personnalisés à l'aide de l'API Controller.

Je rencontre un problème avec la mise à jour de mon composant d'entrée personnalisé React state mais ne met pas à jour la référence dans l'état du formulaire. Ainsi, un champ obligatoire est toujours marqué comme invalide et je ne peux pas soumettre mon formulaire.

Voici une démo de mon problème: https://codesandbox.io/s/react-hook-form-controller-bofv5

Il doit déconnecter les données du formulaire lors de la soumission - mais la soumission ne se produit jamais car le formulaire n'est pas valide.

javascriptreactjsreact-hooksreact-hook-form
2
Summy

Je pense avoir affiné votre problème. J'ai d'abord supprimé le rules={{ required: true }} Du contrôleur et essayé le formulaire. Il m'a dit firstName: undefined. Ensuite, j'ai commenté l'attribut onChange. Après cela, le formulaire fonctionne correctement. Il semble que onChange devrait être utilisé si vous souhaitez fournir un extracteur de valeur personnalisé. La valeur doit être renvoyée par la fonction. Voici un exemple d'entrée simple: onChange={([{target}]) => target.value}reference . De plus, il est important de noter que handleSubmit extrait un état interne avec les valeurs, par exemple, vous n'avez pas besoin de les garder vous-même.

Ce composant mis à jour semble fonctionner:

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

Juste une remarque, je n'ai jamais travaillé avec cette bibliothèque, alors ne me faites confiance que dans la mesure où vous pouvez me jeter.

4
Elias