Les principaux défis qu'une bibliothèque de formulaires React devrait résoudre

La création de formulaires dans React peut être un processus difficile et répétitif. C'est pourquoi les bibliothèques de formulaires sont là pour vous aider. Dans cet article, je discute des défis qu'une bibliothèque de formulaires devrait tenter de résoudre.

Construire des formulaires dans React peut facilement devenir un processus difficile et répétitif lorsqu'il s'agit de formulaires avec une logique complexe. Vous devez gérer les données du formulaire, le valider, configurer quand et comment afficher le message d'erreur pour les entrées non valides, et également être en mesure de réinitialiser le formulaire à son état initial si nécessaire.

La documentation React explique comment créer formulaires dans React en utilisant des composants contrôlés et non contrôlés, mais vous vous rendrez vite compte que vous avez besoin d'un moyen simple et efficace de créer des formulaires lorsque vous commencez à gérer des formulaires volumineux et complexes dans vos projets.

Cependant, il existe différentes bibliothèques de formulaires qui vous pouvez utiliser pour simplifier la complexité de la création de formulaires avec React. KendoReact Form en fait partie. Dans cet article, je vais vous montrer un formulaire simple qui est construit sans aucune bibliothèque de formulaires et mettre en évidence les zones qui devraient être améliorées lors de l'utilisation d'une bibliothèque de formulaires.

Tous les problèmes que je vais mentionner peuvent être résolus en utilisant le

Bibliothèque KendoReact Form . Après avoir vu la démo que nous explorons dans cet article, je vous encourage à lire ce billet de blog précédent qui montre à quel point il est succinct de créer des formulaires complexes avec KendoReact Form . Plus de détails et d'exemples sont traités dans le React Form Guidelines doc .

The Demo

Voici un formulaire simple pour collecter des informations sur un utilisateur.

Le formulaire recueille le nom de l'utilisateur, son adresse e-mail et quelques autres éléments de données. Le formulaire valide les champs nom, email et date de naissance. Discutons de certains des problèmes avec ce code.

Form State

Vous devriez remarquer l'utilisation répétée de React.useState pour définir les valeurs initiales des différents contrôles d'entrée, et le ] onChange n'appelle que la fonction respective pour mettre à jour l'état de cette entrée. Une bibliothèque de formulaires React devrait faciliter cette tâche. Il devrait simplement traiter de l'état d'entrée et me donner toutes les données lorsque le formulaire est soumis.

Lorsque la soumission du formulaire est en cours de traitement, je veux savoir que cela est en cours et désactiver le bouton d'envoi. Cela devrait donc être disponible immédiatement.

Il devrait également être possible de spécifier des valeurs avec lesquelles initialiser le formulaire. Ceci est utile pour les formulaires de mise à jour où l'utilisateur peut modifier des enregistrements existants. Après avoir modifié certains champs, l'utilisateur peut décider qu'il n'a besoin de changer qu'un seul champ et peut ne pas être sûr des champs qu'il a déjà modifiés. Dans ce cas, il peut être utile de réinitialiser l'état du formulaire et de ne mettre à jour que celui qui est nécessaire. Pour ce scénario, une bibliothèque de formulaires devrait fournir un moyen de réinitialiser le formulaire.

Validation et messages d'erreur

La ​​validation est vitale pour tout formulaire Web, et la complexité peut varier. Dans l'exemple, vous pouvez voir comment je trace l'état d'erreur à l'aide des erreurs et touchées . Ces valeurs d'état sont modifiées dans les gestionnaires d'événements handleBlur et handleFocus . Une bibliothèque de formulaires doit fournir un moyen simple de spécifier la logique de validation sans que vous ayez à gérer les détails de bas niveau des événements Form, Focus et Touch. Il devrait fournir une validation au niveau du formulaire et au niveau du champ.

La logique et la complexité de la validation dépendent du cas d'utilisation. Dans certains scénarios, je peux utiliser une bibliothèque de validation de schéma comme Yup ou utiliser une logique personnalisée, et une bibliothèque de formulaires devrait fournir une intégration facile pour cela. Cela pourrait être implémenté en passant un accessoire au composant. Le prop pourrait accepter une fonction de validation qui renvoie une chaîne d'erreur ou un objet qui sera utilisé pour valider les données entrées si nécessaire.

Il devrait également être possible pour la bibliothèque d'afficher les messages d'erreur sans que vous ayez à déclarer les composants pour savoir comment ils doit être rendu. Cette fonctionnalité peut être personnalisable en vous permettant de spécifier un style ou une classe personnalisé, ou fournir un moyen simple de spécifier un composant de style personnalisé qui sera utilisé pour les afficher. Cela donne un équilibre entre le fait de donner à la bibliothèque le contrôle sur la façon dont elle rend les messages d'erreur à des fins de prototype ou de démonstration, et la personnalisation de la façon dont vous voulez qu'il soit rendu pour s'adapter à votre modèle UX. que le développeur est responsable de faire respecter, une bonne bibliothèque de formulaires React vous aidera à adhérer aux meilleures pratiques UX.

Composants personnalisés

L'exemple de formulaire a une date d'entrée pour la date de naissance. Comme vous le savez peut-être, différents navigateurs peuvent rendre cette entrée différemment. Vous souhaiterez créer ou utiliser un composant personnalisé qui ressemblera et se comportera de la même manière quel que soit le navigateur. Vous pouvez choisir d'utiliser n'importe quelle bibliothèque d'interface utilisateur pour afficher une entrée de date et d'heure personnalisée, et une bibliothèque de formulaires doit inclure la prise en charge des composants personnalisés.

Un autre exemple où un composant personnalisé peut être utile est si vous disposez d'un formulaire pour récupérer les frais de livraison. et les détails de la carte de crédit. Vous souhaiterez peut-être implémenter le flux de collecte de données de carte de crédit en utilisant un composant conçu pour ressembler à une carte physique.

Vous pouvez y ajouter une validation et afficher le message d'erreur à côté de la carte, tout en affichant le message d'erreur pour les autres champs de texte liés à l'expédition sous les champs respectifs. [19659003] Une bibliothèque de formulaires doit vous permettre d'ajouter ce composant au formulaire et de faire gérer son état par la bibliothèque de formulaires, de la même manière que les autres champs sont gérés. Il doit fournir l'état du formulaire, le message de validation et d'autres données nécessaires au composant en tant qu'accessoires de rendu ou en utilisant un hook React.

La bibliothèque KendoReact Form fournit un support pour les composants personnalisés. Vous pouvez utiliser n'importe laquelle des entrées de formulaire KendoReact ou des composants de n'importe quelle autre bibliothèque de composants d'interface utilisateur.

Syntaxe et performances

Une autre caractéristique importante sur laquelle une bibliothèque de formulaires React devrait se concentrer est la syntaxe et les performances. Tout en visant à réduire la répétition du code et à faciliter la gestion des états et des erreurs, il est très probable qu'une bibliothèque puisse être implémentée d'une manière qui affecte négativement les performances de votre application.

Certaines bibliothèques de formulaires fournissent un composant d'ordre supérieur (HOC) que vous encapsulerait votre formulaire, puis accéder aux accessoires dont vous pourriez avoir besoin pour vous connecter explicitement à vos gestionnaires d'événements de formulaire et de champ. Certains peuvent fournir un HOC, mais vous n'avez pas besoin de connecter explicitement les accessoires aux gestionnaires d'événements.

Par exemple, prenez cette bibliothèque de formulaires imaginaires qui vous oblige à passer explicitement les gestionnaires d'événements du HOC à chaque champ.

 const   Exemple   =   ()   =>   (
   < div > 
     < h1 >  A Formulaire  < /  h1 > 
     < FormHOC
      initialValues ​​ =  { { email :   ''  password :   ''  }  } 
      onSubmit  =  { ( values ​​)   =>   {
           alert  ( JSON .  stringify  ( values ​​  null   2 ) ) ; 
      } } 
    > [19659061] { ( {
        valeurs 
        erreurs 
        touché 
        handleChange 
        handleBlur 
        handleSubmit 
        
      } )   =>   (
         < form onSubmit  =  { handleSubmit }  > 
           < entrée
            type  =  "e-mail" 
            name  =  "email" 
            onChange  =  { handleChange } 
            onBlur  =  { handleBlur } 
            value  =  { values ​​.  email } 
           / > 

           < input
            type  =  "mot de passe" 
            name  =  "mot de passe" 
            onChange  =  { handleChange } 
            onBlur  =  { handleBlur } 
            value  =  { values ​​.  password } 
           / > 
          
           < button type  =  " soumettre "> 
            Soumettre
           < /  bouton > 
         < /  formulaire > 
      ) } 
     < /  FormHOC > 
   < /  div > 
) ; 

Il y a trop de code passe-partout dans le code ci-dessus. Si vous ne parvenez pas à gérer l'événement onBlur pour une entrée, cela peut entraîner un comportement indésirable. C'est pourquoi la syntaxe devrait réduire ce code standard et vous permettre également d'utiliser ces mécanismes explicites lorsque vous le souhaitez.

De plus, l'exemple ci-dessus entraînerait le rendu du formulaire à chaque fois qu'un champ est mis à jour. Un trop grand nombre de rendus peut affecter votre application s’il s’agit d’un formulaire volumineux ou si l’appareil ne peut pas gérer un trop grand nombre de rendus sur une courte période. La bibliothèque devrait être capable d'isoler les rendus de composants, de sorte que seul le champ nécessaire soit mis à jour et restitué si nécessaire.

Conclusion

Construire des formulaires dans React peut être un processus difficile et répétitif. Vous devez gérer les données du formulaire, les valider, configurer quand et comment afficher le message d'erreur pour les entrées non valides, et également être en mesure de réinitialiser le formulaire à l'état initial. Dans une telle situation, vous voudrez utiliser une bibliothèque de formulaires pour vous aider.

Ce faisant, vous devez utiliser diverses fonctionnalités pour évaluer une bibliothèque de formulaires. Ce sont:

1. Gestion de l'état du formulaire
2. Validation
3. Intégration avec des composants personnalisés et des bibliothèques tierces
4. Syntaxe
5. Performance

En utilisant le formulaire KendoReact, vous pouvez simplifier la gestion de votre état, implémenter la validation de formulaire et apportez facilement des composants personnalisés, tels que des contrôles de formulaire KendoReact supplémentaires. Le formulaire KendoReact fait partie de la bibliothèque d'interface utilisateur KendoReact pour React, qui contient plus de 90 composants pratiques similaires.

Maintenant que vous avez vu de première main les problèmes liés à la création d'un formulaire sans bibliothèque, vous pouvez voir à quel point il peut être propre. pour utiliser KendoReact Form dans ce billet de blog sur la création de formulaires dans React .

Voir aussi ce guide pour savoir comment créer des formulaires accessibles et performants .

Références