Blog

May 09, 2023

Comment créer des formulaires dans React à l'aide de React Hook Form

Créez et validez vos formulaires React avec le moindre effort. Bâtiment

Créez et validez vos formulaires React avec le moindre effort.

La création de 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 pour créer des formulaires dans React qui simplifie le processus de création de formulaires complexes et réutilisables. Si vous cherchez à créer une application React, vous devez apprendre à créer des formulaires dans React à l'aide de la bibliothèque React Hook Form.

Pour commencer à utiliser React Hook Form, vous devez l'installer à l'aide des gestionnaires de packages 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 :

Pour créer un formulaire à l'aide de React Hook Form, vous devez utiliser leutiliserFormulaire accrocher. LeutiliserFormulairehook vous donne accès aux méthodes et propriétés que vous utiliserez pour créer et gérer vos formulaires dans votre application React.

Voici un exemple montrant comment utiliser leutiliserFormulaireaccrocher:

La bibliothèque React Hook Form utilise leenregistrer méthode pour enregistrer vos valeurs d'entrée dans le crochet. Leenregistrerconnecte 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 "prénom". LegérerSoumettreLa méthode 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 rappelonSubmitaugérerSoumettre méthode. LeonSubmitLa fonction recevra un objet contenant les valeurs de toutes les entrées du formulaire.

Leenregistrer La méthode vous permet de définir des règles de validation pour vos champs de saisie. Pour ajouter une validation à vos champs de saisie, vous transmettez un objet avec des règles de validation comme deuxième argument à laenregistrerméthode.

Ainsi:

Dans cet exemple, vous ajoutez une règle de validation au champ de saisie "prénom" et deux règles de validation au "mot de passe". LerequisLa règle 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.

Lelongueur maximale La règle définit le nombre maximal de lettres alphabétiques de la valeur d'entrée. A part lerequisetlongueur maximaleméthodes, vous pouvez ajouter d'autres règles de validation, telles quemin,maximum,Longueur minimale,modèle, etvalider.

Leminrègle spécifie la valeur minimale d'un champ de saisie et lamaximumrègle spécifie sa valeur maximale.

Vous pouvez utiliser leminetmaximumrègles avec des entrées de type nombre, comme ceci :

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

LeLongueur minimalerègle est similaire à lalongueur maximalerègle mais définit le nombre minimum de lettres alphabétiques à la place :

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

Lemodèle règle spécifie un modèle d'expression régulière auquel la valeur d'entrée doit correspondre. Levalider La règle vous permet de définir une fonction de validation personnalisée pour valider la valeur d'entrée. La fonction doit renvoyer soitvraiou un message d'erreur de chaîne.

Par exemple:

Dans cet exemple, l'entrée "prénom" utilise lemodèle règle. Lemodèlenécessite que la valeur d'entrée ne contienne que des caractères alphabétiques (majuscules et minuscules).

L'entrée "test" utilise levaliderrègle pour définir une fonction de validation personnalisée qui vérifie si sa valeur est inférieure ou égale à 12.

La bibliothèque React Hook Form fournit un mécanisme intégré pour gérer les erreurs JavaScript dans vos formulaires. LegérerSoumettreLa fonction, 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, si des erreurs de validation se produisent, la promesse est rejetée avec un objet d'erreur qui contient les erreurs de validation.

Voici un exemple de la façon de gérer les erreurs à l'aide degérerSoumettrefonction:

Dans ce bloc de code, leformState l'objet accède aux erreurs de chaque champ. Leles erreurs L'objet stocke les erreurs de validation pour chaque champ d'entrée. Leles erreursL'objet rend conditionnellement un message d'erreur pour chaque champ invalide.

Pour leprénomchamp de saisie, si lerequis règle n'est pas respectée, un message d'erreur—"Veuillez saisir votre prénom"—s'affichera à côté du champ de saisie. Si la valeur de laâgechamp de saisie 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".

La création de formulaires dans React peut être un processus complexe et chronophage. Néanmoins, React Hook Form simplifie cette tâche en fournissant une bibliothèque flexible et facile à utiliser pour la gestion des données de formulaire et la validation.

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

Noble Okafor est un ingénieur logiciel qualifié avec plus de 3 ans d'expérience dans le domaine de la programmation. Il est passionné par la création de solutions logicielles JavaScript, natives et multiplateformes mobiles et Web optimisées. Il s'efforce de documenter ses connaissances et ses leçons à travers ses articles techniques avec plus d'un an d'expérience dans l'écriture. L'objectif principal de ces articles est de simplifier les complexités autour des sujets de génie logiciel.