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 en utilisant 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 :

 npm install react-hook-form

Pour installer React Hook Form en utilisant yarn, exécutez la commande suivante :

 yarn add react-hook-form

Création d’un formulaire avec React Hook Form

Pour créer un formulaire à l’aide de React Hook Form, vous devez utiliser l’option useForm crochet. 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 crochet :

 import React from 'react'
import { useForm } from 'react-hook-form';

function Form() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type='text' { ...register("firstname")} />
      <button>Submit</button>
    </form>
  )
}

export default Form;

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

Lire  7 choses que nous n'aimons pas à propos de la PS5

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 à l’adresse handleSubmit méthode. La méthode onSubmit recevra un objet contenant les valeurs de toutes les entrées du formulaire.

Valider les entrées avec la méthode Register

Le registre vous permet de mettre en place des règles de validation pour vos champs de saisie. Pour ajouter la validation à vos champs de saisie, vous passez un objet avec des règles de validation comme second argument à la méthode enregistrer méthode.

Comme ça :

 import React from 'react'
import { useForm } from 'react-hook-form';

function Form() {

  const{ register, handleSubmit } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type='text' { ...register("firstname", { required: true})} />
      <input type='password' { ...register("password", { required: true, maxLength: 10})}/>
      <button>Submit</button>
    </form>
  )
}

export default Form;

Dans cet exemple, vous ajoutez une règle de validation au champ de saisie « prénom » et deux règles de validation au champ « mot de passe ». La règle de validation obligatoire 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 définit 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, minLength, modèleet valider.

min &amp ; max

Le 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 fonction min et max avec des entrées de type numérique, comme ceci :

 <input type='number' { ...register("age", {min: 18, max: 35}) } />

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

Lire  Le PlayStation Plus passe-t-il de la PS4 à la PS5 ?

minLength

Les minLength est similaire à la règle maxLength mais fixe le nombre minimum de lettres alphabétiques à la place :

 <input type='text' { ...register("name", { minLength: 10 })}/>

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

pattern &amp ; validate

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

Par exemple :

 <input type='text' { ...register("firstname", {pattern: **/^[A-Za-z]+$/**}) } />
<input type='number' { ...register("test", {**validate: (value) => value <= 12** }) } />

Dans cet exemple, l’entrée « prénom » utilise la méthode 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 la méthode valider 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 gérer les erreurs JavaScript dans vos formulaires. La bibliothèque 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 la méthode handleSubmit fonction :

Lire  Comment endoflife.date peut vous aider à savoir quand votre assistance technique prendra fin

 import React from 'react'
import { useForm } from 'react-hook-form';

function Form() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => console.log(data); 

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type='text' { ...register("firstname", { required: true})} />
      {errors.firstname && <span>Please input your Firstname</span>}

      <input type='number' { ...register("age", {min: 18, max: 35,}) } />
      {errors.age?.type === 'max' && <span> You are too old for this site</span>}
      {errors.age?.type === 'min' && <span> You are too young for this site</span>}

      <button>Submit</button>
    </form>
  )
}

export default Form;

Dans ce bloc de code, la fonction formState a accès aux erreurs de chaque champ. L’objet erreurs stocke les erreurs de validation pour chaque champ de saisie. L’objet erreurs L’objet rend conditionnellement 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 ».

Le système de gestion de l’information de l’entreprise (SGI)

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.

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 ainsi l’expérience utilisateur et la qualité globale de vos applications React.