Comment construire des formulaires dans React en utilisant React Hook Form

Construire des formulaires dans une application React peut être complexe et prendre du temps. Avec l’aide de la bibliothèque React Hook Form, vous pouvez facilement ajouter des formulaires performants à votre application React.

React Hook Form est une bibliothèque de construction de formulaires dans React qui simplifie le processus de création de formulaires complexes et réutilisables. Si vous cherchez à construire une application React, vous devriez apprendre à construire des formulaires dans React à l’aide de la bibliothèque React Hook Form.

Installation de React Hook Form

Pour commencer à utiliser React Hook Form, vous devez l’installer à l’aide des gestionnaires de paquets npm ou yarn.

Pour installer React Hook Form à l’aide de npm, exécutez la commande suivante dans votre terminal :

Pour installer React Hook Form à l’aide de yarn, exécutez la commande suivante :

Création d’un formulaire à l’aide de React Hook Form

Pour créer un formulaire à l’aide de React Hook Form, vous devez utiliser la commande useForm hook. Le crochet useForm vous donne accès aux méthodes et propriétés que vous utiliserez pour construire et gérer vos formulaires dans votre application React.

Voici un exemple montrant comment utiliser le hook useForm pour l’utilisation du crochet :

La bibliothèque React Hook Form utilise l’option enregistrer pour enregistrer vos valeurs d’entrée dans le crochet. La méthode register connecte les champs de saisie d’un formulaire à la bibliothèque React Hook Form afin que la bibliothèque puisse suivre et valider les champs de saisie.

Dans le bloc de code ci-dessus, vous enregistrez une entrée avec le nom « firstname ». Le handleSubmit de la bibliothèque React Hook Form gère la soumission du formulaire.

Pour gérer la soumission du formulaire, vous passerez la fonction de rappel onSubmit à la fonction handleSubmit . La méthode onSubmit recevra un objet contenant les valeurs de toutes les entrées du formulaire.

Voir aussi :  Qu'est-ce que COBOL et pourquoi est-il en demande ?

Valider les entrées avec la méthode Register

La fonction registre vous permet de définir des règles de validation pour vos champs de saisie. Pour ajouter la validation à vos champs de saisie, vous transmettez un objet contenant des règles de validation en tant que deuxième argument de la méthode register comme deuxième argument de la méthode register .

Comme suit :

Dans cet exemple, vous ajoutez une règle de validation au champ de saisie « prénom » et deux règles de validation au champ de saisie « mot de passe ». Les règles de validation sont les suivantes requises spécifie que l’utilisateur doit remplir les champs de saisie et qu’il ne peut pas soumettre le formulaire si les champs sont vides.

La règle maxlength fixe le nombre maximal de lettres alphabétiques de la valeur d’entrée. Outre la règle requis et longueur maximale vous pouvez ajouter d’autres règles de validation, telles que min, max, minLongueur, modèle et valider.

min & max

Les min spécifie la valeur minimale d’un champ de saisie et la règle max spécifie sa valeur maximale.

Vous pouvez utiliser la règle min et max avec des entrées de type numérique, comme ceci :

La valeur du champ de saisie ci-dessus doit être au moins égale à 18 et au plus égale à 35.

minLength

La valeur du champ de saisie ci-dessus doit être au moins égale à 18 et au plus égale à 35. minLongueur est similaire à la règle maxLength mais fixe le nombre minimum de lettres alphabétiques :

Dans cet exemple, la règle minLength spécifie que la valeur de l’entrée doit comporter au moins 10 caractères.

modèle & valider

Les modèle spécifie un motif d’expression régulière auquel la valeur d’entrée doit correspondre. La règle valider vous permet de définir une fonction de validation personnalisée pour valider la valeur d’entrée. La fonction doit renvoyer soit vrai soit un message d’erreur sous forme de chaîne.

Voir aussi :  5 façons de gérer efficacement les erreurs dans les applications Express.js avec des exemples pratiques

Par exemple :

Dans cet exemple, l’entrée « prénom » utilise la fonction modèle règle. La règle modèle exige que la valeur d’entrée ne contienne que des caractères alphabétiques (majuscules et minuscules).

L’entrée « test » utilise le motif valider pour définir une fonction de validation personnalisée qui vérifie si sa valeur est inférieure ou égale à 12.

Gestion des erreurs dans votre formulaire

La bibliothèque React Hook Form fournit un mécanisme intégré pour gérer les erreurs JavaScript dans vos formulaires. Les handleSubmit appelée lorsque l’utilisateur soumet le formulaire, renvoie une promesse qui se résout avec les données du formulaire si la validation est réussie.

Cependant, en cas d’erreur de validation, la promesse est rejetée avec un objet error qui contient les erreurs de validation.

Voici un exemple de gestion des erreurs à l’aide de l’objet handleSubmit :

Dans ce bloc de code, la fonction formState accède aux erreurs de chaque champ. L’objet erreurs stocke les erreurs de validation pour chaque champ de saisie. L’objet erreurs affiche un message d’erreur pour chaque champ invalide.

Pour l’objet prénom si le champ de saisie requis n’est pas respectée, un message d’erreur – « Veuillez saisir votre prénom » – s’affiche à côté du champ de saisie. Si la valeur de la règle âge est en dehors de la plage autorisée, un message d’erreur s’affiche.

Si la valeur est inférieure à 18, le message d’erreur sera « Vous êtes trop jeune pour ce site », et si la valeur est supérieure à 35, le message d’erreur sera « Vous êtes trop vieux pour ce site ».

Vous pouvez maintenant construire des formulaires fiables en React

Construire des formulaires dans React peut être un processus complexe et chronophage. Pourtant, React Hook Form simplifie cette tâche en fournissant une bibliothèque facile à utiliser et flexible pour gérer les données et la validation des formulaires.

Voir aussi :  Un guide de base pour manipuler le système de fichiers dans Node.js

Avec l’aide du crochet useForm, de la méthode register et de la méthode handleSubmit, la construction de formulaires dans React devient un processus plus efficace et rationalisé. Vous pouvez créer des formulaires fonctionnels, améliorant à leur tour l’expérience utilisateur et la qualité globale de vos applications React.

S’abonner à notre newsletter

Comment créer un formulaire dans react hook form ?

Comment créer un formulaire de base avec react-hook-form ?

  • register est une fonction fournie par le hook useForm.
  • handleSubmit est la fonction que nous pouvons appeler lorsque le formulaire est soumis.
  • errors est une propriété imbriquée dans l’objet formState qui contiendra les erreurs de validation, le cas échéant.

Comment créer un formulaire dans ReactJS ?

Vous ajoutez un formulaire avec React comme n’importe quel autre élément :

  • Exemple:Obtenez votre propre serveur React.js. Ajoutez un formulaire qui permet aux utilisateurs d’entrer leur nom : function MyForm() { return (

    ) } const root = ReactDOM.

  • Exemple :
  • Exemple :

Comment créer un formulaire dynamique dans react hook form ?

Comment construire des champs de saisie dynamiques dans React avec Hook Form ?

  • Étape 1 : configuration d’une nouvelle application.
  • Étape 2 : Installer le plugin Bootstrap.
  • Étape 3 : Ajouter les plugins Yup et Hook Form.
  • Étape 4 : Création d’un composant de formulaire.
  • Étape 5 : Enregistrer le nouveau composant dans App js.
  • Étape 6 : Démarrer le serveur React.

Comment fonctionne react hook form ?

Qu’est-ce que React Hook Form ? React Hook Form adopte une approche légèrement différente des autres bibliothèques de formulaires de l’écosystème React en adoptant l’utilisation d’entrées non contrôlées à l’aide de ref au lieu de dépendre de l’état pour contrôler les entrées. Cette approche rend les formulaires plus performants et réduit le nombre de re-rendus.

Cliquez pour évaluer cet article !
[Total: Moyenne : ]

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *