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

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.

Installation du formulaire de crochet React

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 :

npm installer réagir-crochet-formulaire

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

fil ajouter réagir-crochet-forme

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 le utiliserFormulaire accrocher. Le utiliserFormulaire hook vous donne accès aux méthodes et propriétés que vous utiliserez pour créez et gérez vos formulaires dans votre application React.

Voici un exemple montrant comment utiliser le utiliserFormulaire accrocher:

importer Réagir depuis'réagir'
importer { useForm } depuis'react-hook-form';
fonctionFormer() {
constante { registre, handleSubmit } = useForm();
constante onSubmit = (données) =>console.log (données);
retour (



'texte' { ...enregistrer("prénom")} />
Soumettre</button>
 </form>
 )
}
exporterdéfaut Former;

La bibliothèque React Hook Form utilise le enregistrer méthode pour enregistrer vos valeurs d'entrée dans le hook. Le enregistrer 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 "prénom". gérerSoumettre La 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 rappel onSubmit au gérerSoumettre méthode. Le onSubmit La fonction recevra un objet contenant les valeurs de toutes les entrées du formulaire.

Valider les entrées avec la méthode Register

Le enregistrer 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 à la enregistrer méthode.

Ainsi:

importer Réagir depuis'réagir'
importer { useForm } depuis'react-hook-form';
fonctionFormer() {
constante{ registre, handleSubmit } = useForm();
constante onSubmit = (données) =>console.log (données);
retour (



'texte' { ...enregistrer("prénom", { requis: vrai})} />
'mot de passe' { ...enregistrer("mot de passe", { requis: vrai, longueur maximale: 10})}/>
Soumettre</button>
 </form>
 )
}
exporterdéfaut Former;

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". Le requis La 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.

Le longueur maximale La règle définit le nombre maximal de lettres alphabétiques de la valeur d'entrée. A part le requis et longueur maximale méthodes, vous pouvez ajouter d'autres règles de validation, telles que min, maximum, Longueur minimale, modèle, et valider.

min max

Le min règle spécifie la valeur minimale d'un champ de saisie et la maximum règle spécifie sa valeur maximale.

Vous pouvez utiliser le min et maximum règles avec des entrées de type nombre, comme ceci :

'nombre' { ...enregistrer("âge", {min: 18, maximum: 35}) } />

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

Longueur minimale

Le Longueur minimale règle est similaire à la longueur maximale règle mais définit le nombre minimum de lettres alphabétiques à la place :

'texte' { ...enregistrer("nom", { Longueur minimale: 10 })}/>

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 et valider

Le modèle règle spécifie un modèle d'expression régulière auquel la valeur d'entrée doit correspondre. Le valider 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 soit vrai ou un message d'erreur de chaîne.

Par exemple:

'texte' { ...enregistrer("prénom", {modèle: **/^[A-Za-z]+$/**}) } />
'nombre' { ...enregistrer("test", {**valider: (valeur) => valeur <= 12** }) } />

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

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

Gérer les erreurs dans votre formulaire

La bibliothèque React Hook Form fournit un mécanisme intégré pour gestion des erreurs JavaScript dans vos formulaires. Le gérerSoumettre La 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 de gérerSoumettre fonction:

importer Réagir depuis'réagir'
importer { useForm } depuis'react-hook-form';
fonctionFormer() {
constante { enregistrer, gérerSoumettre, formState: { erreurs } } = useForm();
constante onSubmit = (données) =>console.log (données); 
retour (



'texte' { ...enregistrer("prénom", { requis: vrai})} />
 {errors.firstname && <portée>Veuillez saisir votre prénomportée>}
'nombre' { ...enregistrer("âge", {min: 18, maximum: 35,}) } />
 {errors.age?.type 'max' && <portée> Vous êtes trop vieux pour ce siteportée>}
 {errors.age?.type 'min' && <portée> Vous êtes trop jeune pour ce siteportée>}
Soumettre</button>
 </form>
 )
}
exporterdéfaut Former;

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

Pour le prénom champ de saisie, si le requis 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 âge champ 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".

Vous pouvez maintenant créer des formulaires fiables dans React

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.