Gestion des formulaires

Problématique

La gestion des formulaires est l'un des points délicats dans le développement React. La question tourne autour de la notion de "source of truth", c'est-à-dire où sont stockées les données de référence :

• "composants contrôlés" : la valeur de référence est dans une variable d'état. Le composant ne peut changer de valeur que si la variable change de valeur. C'est le cas recommandé.

• "composants non-contrôlés" : la valeur de référence est dans le champ de formulaire. Pour y accéder, React doit la lire depuis le DOM.

Dans les deux cas, cela demande un surcroit de travail par rapport au développement web classique.

React-hook-form

Le module react-hook-form prend en charge la plus grande partie de ce travail.

Un exemple simple d'utilisation figure ci-dessous :

import { useForm } from "react-hook-form";

export function App () {

  const { register, handleSubmit } = useForm();

  // Fonction qui enregistre les données dans la base
  const saveUserData = (data) => {
    // ...
  }

  return <form onSubmit={handleSubmit(saveUserData)}>
    <input type="text" {...register("prenom")} />
    <input type="text" {...register("nom")} />
    <button type="submit">Envoyer</button>
  </form>;
}

Comme on peut le voir, le module requiert peu d'overhead par rapport à un formulaire HTML pur.

Le hook useForm renvoie deux fonctions : * handlesubmit permet de déclarer la fonction de traitement des données, * register permet de déclarer les différents champs à gérer.

Note : il y a beaucoup plus de fonctionnalités, qui peuvent être utilisées pour gérer des cas plus complexes.

Traitement des erreurs et validation

React-hook-form peut gérer lui-même les erreurs simples (par exemple, un champ requis laissé vide), ou bien confier cette tâche à une bibliothèque de validation telle que Yup.

Se reporter à la documentation pour un exemple d'utilisation (ou bien nous demander).