Fermer

mars 31, 2020

Comment créer des formulaires personnalisés avec des crochets React


La création de formulaires dans React est devenue si facile maintenant. Nous allons apprendre comment créer des formulaires personnalisés à l'aide de Hooks et supprimer la nécessité de télécharger une tonne de bibliothèques pour nos applications.

Dans cet article, nous allons apprendre comment utiliser React Hooks pour créer des formulaires personnalisés dans React. En créant nos formulaires personnalisés à l'aide de Hooks, nous pouvons avoir une logique de formulaires personnalisés de bas niveau, que nous pouvons réutiliser dans de nombreuses parties de notre application sans avoir à télécharger une tonne de bibliothèques.

Les formulaires sont l'une des principales fonctionnalités de le Web – une façon dont nous pouvons laisser l'utilisateur communiquer avec nous et voir ce qu'il pense. La création de formulaires n'est pas une tâche si facile. Nous devons garder une trace de chaque champ, valider la valeur, vider si nécessaire, etc.

Chaque développeur a sa propre façon de créer des formulaires et ses bibliothèques préférées pour le faire, mais d'abord nous allons revenir à l'époque dans le développement de React et comprendre comment nous venions de l'absence de bibliothèque de formulaires dans React, à une époque où nous avons beaucoup de bibliothèques et nous pouvons également créer notre propre bibliothèque, très facilement.

Forms in React

Surtout dans React , les formulaires ne sont plus un problème comme ils l'étaient il y a quelques années. Nous avons commencé à faire beaucoup de recherches, les gens ont commencé à créer des formulaires personnalisés à l'aide de modèles, tels que les HOC et les accessoires de rendu, et à un moment donné, de nombreuses bibliothèques ont commencé à apparaître pour la gestion des formulaires.

Finalement, la communauté a commencé à adopter une bibliothèque pour gérer et créer des formulaires: Redux Form une bibliothèque pour la gestion des formulaires créée par Erik Rasmussen . Redux était très populaire à cette époque – et l'est toujours – et les gens ont commencé à l'utiliser dans tout, y compris dans leurs formulaires. Mais Redux Form a un problème, ou un déficit: il maintient l'état de la forme dans l'état global. Nous n'avons pas besoin de conserver notre logique d'état de forme dans notre état global car il s'agit simplement d'un état de forme. De plus, Redux Form n'est pas le meilleur choix pour les formulaires très simples, ni même le meilleur choix pour les formulaires de haut niveau, ceux qui nécessitent plus de logique pour être construits.

Ensuite, Jared Palmer a créé la bibliothèque connue aujourd'hui comme la meilleure bibliothèque pour créer et gérer des formulaires dans React: Formik . Quels sont les avantages de Formik? Eh bien, vous avez un formulaire d'état très simple et vous pouvez le gérer très facilement, sans le stocker dans votre état global. Formik fonctionne essentiellement en trois étapes: d'abord, il obtient les valeurs dans et hors de votre état de formulaire, puis vous pouvez le valider et tester si tout va bien, et enfin il gère votre soumission de formulaire.

Si vous avez un formulaire de haut niveau, ce qui nécessite beaucoup de validation et de logique à l'intérieur, je vous recommande fortement d'utiliser Formik mais si vous n'avez pas de haut niveau et envisagez de l'utiliser avec un formulaire simple, je ne pense pas que ce soit le meilleur choix pour vous. Formik est toujours la bibliothèque la plus utilisée dans React pour la gestion des formulaires, mais parfois il n'est pas nécessaire de télécharger une bibliothèque et d'écrire beaucoup de code pour un formulaire très simple, et c'est pourquoi nous allons apprendre comment nous pouvons utiliser des crochets pour créer des formulaires personnalisés et gérer notre logique d'état de formulaire très facilement.

Crochets personnalisés

L'une des meilleures choses que React Hooks nous a apporté est la possibilité de partager du code et logique d'état dans n'importe quel composant que nous voulons. Nous pouvons facilement créer un hook personnalisé et l'utiliser partout maintenant, ce qui permet une meilleure logique d'état et un code rationalisé et réutilisé.

J'ai vu beaucoup de gens récemment créer des hooks personnalisés pour tout, même pour les hooks qu'ils sont va utiliser dans un seul fichier. Il n'est pas recommandé de créer un nouveau crochet personnalisé à chaque fois que vous utilisez des crochets – il vous suffit de créer un crochet personnalisé si vous utiliserez la même logique dans plusieurs composants.

Commençons par créer notre crochet personnalisé . Tout d'abord, nous allons créer une nouvelle create-react-app :

 create-react-app use

Maintenant, à l'intérieur de notre projet, créons un dossier appelé hooks, mais à l'intérieur de ce dossier, nous allons avoir un seul fichier, qui sera notre hook personnalisé.

Nous allons créer un nouveau fichier dans ce dossier appelé useCustomForm et à l'intérieur de ce fichier mettre le code suivant:

     const useCustomForm = () => {
      console.log ('Mon premier crochet personnalisé')
    }

    exporter useCustomForm par défaut

Passons maintenant deux arguments dans notre fonction: le premier est initialValues ​​qui sera un objet de nos valeurs initiales de la forme, et le second une fonction appelée onSubmit , qui sera la fonction qui va soumettre nos valeurs de formulaire.

     const useCustomForm = ({initialValues, onSubmit}) => {
      console.log ('Mon premier crochet personnalisé')
    }

    exporter useCustomForm par défaut

Maintenant, importons certaines choses et commençons à écrire notre hook personnalisé. Tout d'abord, nous allons importer le crochet useState pour nous permettre de gérer l'état dans un composant de fonction, le crochet useEffect pour nous permettre d'effectuer certains effets secondaires dans notre fonction, et le crochet useRef pour nous référer à quelque chose qui mute au fil du temps et que nous pourrions vouloir persister.

     import {useState, useEffect, useRef} de "react";

Nous allons maintenant commencer à créer une logique d'état, à l'intérieur de notre fonction, mettez le code suivant:

     const [values, setValues] = useState (initialValues ​​|| {});
    const [errors, setErrors] = useState ({});
    const [touched, setTouched] = useState ({});
    const [onSubmitting, setOnSubmitting] = useState  (faux);
    const [onBlur, setOnBlur] = useState  (faux);

Ensuite, nous allons créer un nouveau const appelé formRendered en utilisant le crochet useRef et utiliser le crochet useEffect comme ceci:

     const formRendered = useRef (true);

    useEffect (() => {
      if (! formRendered.current) {
        setValues ​​(initialValues);
        setErrors ({});
        setTouched ({});
        setOnSubmitting (false);
        setOnBlur (false);
      }
      formRendered.current = false;
    }, [initialValues]);

Maintenant, nous allons créer notre fonction. Puisque notre hook personnalisé va traiter les formulaires, nous allons avoir trois fonctions: handleChange pour suivre la valeur d'un champ chaque fois que nous le modifions, handleBlur pour exécuter le flou événements et une fonction handleSubmit pour soumettre nos valeurs lorsque nous appuyons sur le bouton. Commençons par créer notre fonction handleChange:

     const handleChange = (event: React.ChangeEvent ) => {
      const {target} = événement;
      const {nom, valeur} = cible;
      event.persist ();
      setValues ​​({... values, [name]: value});
    };

Donc, pour expliquer ce que nous faisons ici: nous obtenons event.target d'un élément, puis nous définissons la valeur de cet élément pour qu'il soit la valeur et le nom pour être le nom. Assez simple. Ensuite, nous le définissons sur notre état mais sans supprimer les valeurs des anciennes que nous pourrions avoir.

Maintenant, nous allons créer notre fonction handleBlur qui va ressembler à ceci:

     const handleBlur = (événement: React.ChangeEvent ) => {
      const {target} = événement;
      const {name} = cible;
      setTouched ({... touched, [name]: true});
      setErrors ({... erreurs});
    };

Assez similaire à la précédente, dans cette fonction, nous obtenons le nom d'un event.target et le définissons sur true dans notre état de contact. S'il y a des erreurs, nous allons le mettre dans notre état Erreurs .

Dans notre dernière fonction maintenant, qui va être handleSubmit nous sommes va mettre le code suivant:

     const handleSubmit = (event: any) => {
      if (event) event.preventDefault ();
      setErrors ({... erreurs});
      onSubmit ({valeurs, erreurs});
    };

Dans cette fonction, nous définissons simplement les erreurs puis nous soumettons les valeurs et les erreurs en utilisant la fonction onSubmit , que nous avons reçu comme argument. Notre crochet personnalisé est terminé; tout ce que nous devons faire est de renvoyer tous les états et fonctions dont nous allons avoir besoin:

     return {
      valeurs,
      les erreurs,
      touché,
      handleChange,
      handleBlur,
      handleSubmit
    };

Notre hook personnalisé complet ressemblera à ceci:

     import {useState, useEffect, useRef} de "react";

    const useCustomForm = ({
      Valeurs initiales,
      onSubmit
    }) => {
      const [values, setValues] = useState (initialValues ​​|| {});
      const [errors, setErrors] = useState ({});
      const [touched, setTouched] = useState ({});
      const [onSubmitting, setOnSubmitting] = useState  (faux);
      const [onBlur, setOnBlur] = useState  (faux);

      const formRendered = useRef (true);

      useEffect (() => {
        if (! formRendered.current) {
          setValues ​​(initialValues);
          setErrors ({});
          setTouched ({});
          setOnSubmitting (false);
          setOnBlur (false);
        }
        formRendered.current = false;
      }, [initialValues]);

      const handleChange = (événement: React.ChangeEvent ) => {
        const {target} = événement;
        const {nom, valeur} = cible;
        event.persist ();
        setValues ​​({... values, [name]: value});
    };

      const handleBlur = (événement: React.ChangeEvent ) => {
        const {target} = événement;
        const {name} = cible;
        setTouched ({... touched, [name]: true});
        setErrors ({... erreurs});
    };

      const handleSubmit = (event: any) => {
        if (event) event.preventDefault ();
        setErrors ({... erreurs});
        onSubmit ({valeurs, erreurs});
      };

      revenir {
        valeurs,
        les erreurs,
        touché,
        handleChange,
        handleBlur,
        handleSubmit
      };
    };

    exporter par défaut useSlatt;

Maintenant que nous avons créé notre crochet personnalisé, utilisons-le dans notre formulaire et voyons comment cela fonctionnera!

Utilisation de crochets avec des formulaires

Utilisons maintenant notre crochet personnalisé dans notre App.tsx fichier. Nous allons d'abord créer notre composant App :

     importation de React à partir de "react";

    const App = () => {
      revenir (
        

L'application fonctionne!

      );     };     exporter l'application par défaut;

Ensuite, nous allons créer un formulaire simple et créer trois entrées: une pour le nom une autre pour le lastName et une autre pour l'âge . Ainsi, notre code ressemblera à ceci:

    

Formulaires personnalisés avec crochets




    

Maintenant, nous commençons à utiliser notre crochet personnalisé. D'abord, importons-le en haut de notre fichier:

     import useCustomForm from "../hooks/useCustomForm";

À l'intérieur de notre composant, nous allons détruire certaines valeurs et fonctions de notre crochet personnalisé. Pour commencer à l'utiliser:

     const {
      valeurs,
      les erreurs,
      touché,
      handleChange,
      handleBlur,
      handleSubmit
    } = useCustomForm ();

Vous devrez créer un objet en fonction du type de champs que vous allez avoir – dans notre cas, nous aurons besoin d'un nom lastName et âge . Maintenant, créons notre objet initialValues ​​:

     const initialValues ​​= {
      Nom: "",
      nom de famille: "",
      âge: 0
    };

Et maintenant, nous devons le passer comme argument à notre crochet useCustomForm :

     const {
      valeurs,
      les erreurs,
      touché,
      handleChange,
      handleBlur,
      handleSubmit
    } = useCustomForm ({initialValues});

Nous devons passer l'autre argument, une fonction onSubmit . Créons donc une fonction onSubmit en la passant comme argument, et mettons un code simple:

     const {
      valeurs,
      les erreurs,
      touché,
      handleChange,
      handleBlur,
      handleSubmit
    } = useCustomForm ({
      Valeurs initiales,
      onSubmit: values ​​=> console.log ({values})
    });

Maintenant, tout ce que nous devons faire est de passer notre fonction handleSubmit à notre élément de formulaire:

     

Après cela, nous devons transmettre une valeur pour chaque entrée faisant référence aux valeurs que nous avons importées de notre crochet personnalisé, puis transmettre notre fonction handleChange à chacune de nos entrées, pour suivre ses valeurs. Par exemple, l'entrée nom ressemblera à ceci:

     

Et nous devons le répéter pour les deux autres entrées que nous avons. Ainsi, notre fichier App.tsx ressemblera à ceci:

     import React from "react";

    importez useCustomForm depuis "../hooks/useCustomForm";

    const initialValues ​​= {
      Nom: "",
      nom de famille: "",
      âge: 0
    };

    const App = () => {
      const {
        valeurs,
        les erreurs,
        touché,
        handleChange,
        handleBlur,
        handleSubmit
      } = useCustomForm ({
        Valeurs initiales,
        onSubmit: values ​​=> console.log ({values})
      });

      revenir (
        
          

Formulaires personnalisés avec crochets




);     };     exporter l'application par défaut;

Nous avons maintenant notre crochet de formulaire personnalisé qui fonctionne plutôt bien. Si nous tapons quelque chose sur nos entrées, puis cliquez sur Soumettre, nous allons voir toutes nos valeurs imprimées sur la console.

Création de formulaires riches avec KendoReact

Si vous ne voulez pas créer vos formulaires à partir de zéro , vous pouvez utiliser une bibliothèque d'interface utilisateur, et je vous recommande fortement d'essayer
KendoReact une bibliothèque complète de composants d'interface utilisateur pour React, construite avec des composants réactifs et de haute qualité.

Il comprend tous les composants dont vous avez besoin, depuis une simple application de base jusqu'à une application complexe, donc avec KendoReact vous pouvez vous concentrer sur ce qui compte dans votre application et arrêter d'essayer de créer des composants d'interface utilisateur complexes.

Conclusion

Dans cet article, nous avons appris comment utiliser React Hooks pour écrire de meilleurs formulaires et une logique d'état, supprimer la nécessité de télécharger un grand nombre de bibliothèques pour gérer des formulaires tels que Formik ou Redux Form. Les formulaires ne sont pas l'une des choses les plus faciles à gérer dans le développement Web, mais ils ne sont pas trop difficiles – nous le compliquons parfois, créant une logique et un code inutiles. Maintenant, après avoir suivi ce code, vous pouvez commencer à écrire votre propre bibliothèque de formulaires personnalisés et à l'utiliser dans vos projets.







Source link