Utilisation de FormIK pour gérer les formulaires en réaction

Les formulaires Web sont essentiels pour les sites Web et les applications. Alors que les formulaires HTML natifs offrent des fonctionnalités de base, la gestion de leur état, de leur validation et de leur soumission peut devenir complexe. React, avec son approche axée sur les composants, simplifie la manipulation de la forme mais peut toujours conduire à un code verbeux. Formik, une bibliothèque légère, relève élégamment de ces défis, simplifiant la gestion, la validation et la soumission des états.

Cet article démontre la création d'une forme de réaction avec Formik, présentant ses capacités pour gérer l'état, la validation et la soumission. Nous allons commencer par un composant React de base, puis intégrer FormIK.

Construire un formulaire de réact contrôlé

Les composants de la réaction reposent sur l'état et les accessoires. Les éléments de formulaire HTML maintiennent l'état interne via leur attribut value . Cela en fait des composants incontrôlés - le DOM gère l'état. Cependant, les composants contrôlés , où React gère l'État, offrent un meilleur contrôle et une seule source de vérité.

Une simple forme HTML incontrôlée peut ressembler à ceci:

<div class="formRow">
  <label for="email">Adresse email</label>
  <input type="email" id="email">
</div>
<div class="formRow">
  <label for="password">Mot de passe</label>
  <input type="password" id="password">
</div>
<button type="submit">Soumettre</button>

Convertir cela en un composant de réact contrôlé:

 fonction htmlform () {
  const [e-mail, setEmail] = react.usestate ("");
  const [mot de passe, setpassword] = react.usestate ("");

  retour (
    

Adresse email setEmail (e.target.value)} />

Mot de passe setPassword (e.target.value)} />

Soumettre

)); }

Cette approche fournit une seule source de vérité pour les valeurs de forme, permettant une validation et une optimisation des performances plus faciles.

Pourquoi choisir Formik?

De nombreuses bibliothèques de gestion de formulaires existent pour React (par exemple, REACT Hook Form, Redux Form). Formik se distingue à travers:

1. Approche déclarative: l'abstraction simplifie l'état, la validation et la soumission.
2. Éclairage d'échappement: fournit un contrôle en cas de besoin, malgré son abstraction.
3. État colocalisé: maintient la logique liée à la forme dans le composant.
4. Adaptabilité: permet d'utiliser autant ou aussi peu de Formik que nécessaire.
5. Facilité d'utilisation: simple et efficace.

Intégrons Formrik dans notre composant de formulaire.

Implémentation de Formik

Nous allons créer un formulaire de connexion de base, explorant trois méthodes d'utilisation de Formik:

1. useFormik le crochet
2. Formrik avec le contexte réactif (<formik></formik> )
3. withFormik composant d'ordre supérieur

Une démo nécessite des packages Formik et Yup.

Méthode 1: useFormik le crochet

Notre forme actuelle est non fonctionnelle. Le crochet useFormik fournit des fonctions et des variables FormIK. La journalisation de la valeur retournée révèle son contenu.

Nous utiliserons useFormik avec initialValues ​​et un gestionnaire onSubmit :

 // React Composant
function baseformrik () {
  const FormIK = useformik ({
    InitialValues: {e-mail: "", mot de passe: ""},
    onSubmit (valeurs) {
      // Logique de soumission de formulaire
    }
  });

  retour (
    

{/ * Forms Elements * /}

)); }

Formrik contraignant pour former des éléments:

 // React Composant
function baseformrik () {
  const FormIK = useformik ({
    InitialValues: {e-mail: "", mot de passe: ""},
    onSubmit (valeurs) {
      // Logique de soumission de formulaire
    }
  });

  retour (
    

Adresse email

{/ * ... Autres éléments de formulaire * /}

)); }

Cela gère la soumission ( onSubmit={formik.handleSubmit} ) et l'état d'entrée ( value , onChange via formik.getFieldProps ). Nous évitons la gestion manuelle de l'état et la gestion des événements. Destructurant getFieldProps et handleSubmit améliore encore la clarté du code.

Le<formik></formik> Le composant offre une autre abstraction avec des composants intégrés comme<field></field> ,<form></form> , et<errormessage></errormessage> . Ces composants utilisent le modèle d'accessoires de rendu.

 import {FormIK, champ, form} de 'FormIK';

fonction formIKrenderProps () {
  const initialValues ​​= {e-mail: "", mot de passe: ""};

  const ONSUBMIT = (valeurs) => {
    alert (json.stringify (valeurs, null, 2));
  };

  retour (
    <formik initialvalues="{initialValues}" onsubmit="{onSubmit}">
      {() => (
        <form>
          <field classname="email formField" name="email" type="email"></field>
          {/ * ... Autres éléments de formulaire * /}
        </form>
      )}
    </formik>
  ));
}

Formik gère l'état et la soumission; Nous nous concentrons sur la structure de la forme.

Validation de formulaire avec Formik

FormIK offre une validation au niveau de la forme (en utilisant validate ou validationSchema ), le niveau de champ ou avec des déclencheurs manuels. La validation au niveau du formulaire valide tout le formulaire à la fois. validate est pour la validation personnalisée, tandis que validationSchema utilise une bibliothèque comme Yup.

Exemple en utilisant validate :

 const FormIK = useformik ({
  // ...
  valider: () => {
    const errors = {};
    if (! FormIK.values.email) {errors.email = "requis"; }
    // ... autres validations
    Retour erreurs;
  },
  // ...
});

Exemple en utilisant validationSchema avec yup:

 const FormIK = useformik ({
  // ...
  ValidationsChema: yup.object (). Shape ({{
    Email: yup.string (). Email ("e-mail non valide"). Requis ("requis"),
    // ... autres validations
  }),
  // ...
});

Le niveau de champ et la validation manuelle sont également possibles.

Méthode 3: withFormik composant d'ordre supérieur

withFormik est un composant d'ordre supérieur qui enveloppe votre composant de formulaire.

Exemples pratiques

Illustrons l'affichage des messages d'erreur et la génération d'un nom d'utilisateur.

Affichage des messages d'erreur

FormIK simplifie l'affichage de l'erreur. Vérifiez l'objet errors et affichez les messages:

<label htmlfor="email">
  Adresse email
  gens
</label>

Ou utiliser<errormessage></errormessage> :

<errormessage name="email"></errormessage>

Générer un nom d'utilisateur

setValues ​​de FormIK peut être utilisée pour générer un nom d'utilisateur à partir de l'e-mail:

 onSubmit (valeurs) {
  FormIK.SetValues ​​({... valeurs, nom d'utilisateur: `@ $ {valeurs.email.split (" @ ") [0]}`});
}

Conclusion

Formik simplifie considérablement la manipulation de la forme réague. Cet article couvre les bases; Explorez la documentation de FormIK pour les fonctionnalités avancées et les cas d'utilisation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!