Plus tôt cette semaine, nous avons discuté de la façon de créer des formulaires React complets avec KendoReact qui est un autre excellent didacticiel sur les formulaires React. Dans cet article, nous allons faire un pas en arrière et discuter des défis inhérents à la création de formulaires avec seulement React, tels que la gestion d'état et la validation, puis comment les résoudre avec le composant KendoReact Form.

Les formulaires sont difficiles, quel que soit le cadre ou les bibliothèques que vous utilisez pour les créer. Mais avec React, les formulaires sont particulièrement délicats, car la documentation officielle des formulaires React est brève et ne traite pas des sujets dont les formulaires réels ont toujours besoin, comme la validation des formulaires.

Dans cet article, vous ' Je vais apprendre à créer des formulaires React en toute simplicité à l'aide du nouveau composant KendoReact Form . Vous apprendrez comment simplifier la gestion de l'état de votre formulaire, comment l'intégrer à des composants personnalisés comme les sélecteurs de date et listes déroulantes et comment implémenter une validation de formulaire robuste.

Commençons.

Notre formulaire de démonstration

Pour la démonstration de cet article, nous examinerons plusieurs façons d'implémenter le formulaire d'inscription ci-dessous.

importez React de "react" ; pays importateurs de "./ pays" ; fonction d'exportation par défaut App () {    const [email, setEmail] = React.useState ( "" );    const [password, setPassword] = React.useState ( "" );    const [country, setCountry] = React.useState ( "" );    const [acceptedTerms, setAcceptedTerms] = React.useState (false);    const handleSubmit = (event) => {     console. log (`       Courriel: $ {email}       Mot de passe: $ {mot de passe}       Pays: $ {country}       Conditions acceptées: $ {acceptTerms}     ');     event.preventDefault ();   }    retour (     < formulaire onSubmit = {handleSubmit}>       

Créer un compte

Vous pouvez également essayer ce code sur StackBlitz en utilisant l'exemple intégré ci-dessous.

Pour cet exemple, la première chose à noter est la quantité de code nécessaire pour suivre l'état des champs de formulaire. . Par exemple, pour suivre l'état de l'adresse e-mail, cet exemple utilise un hook.

 const [email, setEmail]  = React.useState ( "" );

Ensuite, pour garantir que l'e-mail reste à jour lorsque l'utilisateur interagit avec le formulaire, vous devez ajouter les attributs value et onChange à l'adresse e-mail .

 < entrée 
  name =  "email" 
  type =  "email" 
  valeur = {email}
  onChange = {e => setEmail (e  .target  .value )}
  requis />

Chaque champ nécessite les mêmes morceaux de code, qui peuvent facilement devenir verbeux à mesure que vos formulaires deviennent plus complexes. Et cette verbosité a des conséquences, car le code verbeux est plus difficile à maintenir et est également plus difficile à refactoriser lorsque vos besoins commerciaux changent.

En outre, considérez que le formulaire d'inscription de cet exemple est volontairement simple pour rendre cet article plus facile à suivre. La plupart des formulaires du monde réel ont beaucoup plus de champs et beaucoup plus de logique métier, et à mesure que la complexité augmente, il est également important de réduire la quantité de code que vous devez écrire et maintenir.

Afin de nettoyer la logique de notre exemple de formulaire, et afin d'ajouter des fonctionnalités puissantes comme la validation de formulaire et les composants personnalisés, voyons comment refactoriser ce formulaire pour utiliser le composant de formulaire KendoReact.

Utilisation du formulaire KendoReact

Le KendoReact Form est un petit (5 Ko minifiés et gzippés) et package rapide pour la gestion des états sans aucune dépendance.

Vous pouvez installer le package dans votre propre application à partir de npm.

  npm   installer   - enregistrer  @  progrès  /  kendo  -  réagit  -  forme 

Le package contient deux composants principaux, Form et Field. L'idée de base est d'envelopper votre code HTML

 < Formulaire   ... > 
   < formulaire > 
     < Champ   nom  ] =  "email"  /> 
     < Champ   nom  =  "mot de passe"  /> 
    ...

     < bouton >  Soumettre  </  bouton > 
   </  formulaire > 
 </  Formulaire > 

  import  React from  "react" ;
 importez  {Form, Field} de  "@ progress / kendo-react-form" ;
 importation  de pays  "./ pays" ;

exportation  fonction par défaut   fonction  App () {
  const handleSubmit = (données, événement) => {
    console.log (`
      Courriel: $ {data.email}
      Mot de passe: $ {data.password}
      Pays: $ {data.country}
      Conditions acceptées: $ {data.acceptedTerms}
    ');

    event.preventDefault ();
  }

  revenir (
     (
        

          
 Créer un compte 

          <Champ
            label =  "Email:" 
            name =  "email" 
            fieldType =  "e-mail" 
            composant = {Input} />

          <Champ
            label =  "Mot de passe:" 
            name =  "mot de passe" 
            fieldType =  "mot de passe" 
            composant = {Input} />

          <Champ
            label =  "Pays:" 
            name =  "pays" 
            component = {DropDown}
            options = {pays} />

          <Champ
            label =  "J'accepte les conditions d'utilisation" 
            nom =  "Termes acceptés" 
            component = {Checkbox} />

           Soumettre 
        
      )}>
    

La ​​première chose à noter à propos de ce code est l'absence de code de gestion d'état détaillé. En fait, pour obtenir les données de votre formulaire, il vous suffit de fournir sur onSubmit prop sur le composant Form.

 < Form 
   onSubmit  =  { handleSubmit}  

Et puis, assurez-vous que chaque champ que vous utilisez possède un attribut name .

 <Field  name  =  "email"  ... />
<Champ  nom  =  "mot de passe"  ... />

Si vous le faites, le composant Form transmettra au gestionnaire onSubmit un objet qui contient toutes les données du formulaire lorsque l'utilisateur soumet le formulaire. Voici à quoi cela ressemble dans une version en direct du formulaire.

< Field ... component = {Input} />[19659044diplomatique<−19459041diploméeField1919909052diplomée--1919909052diplomate1911199006diplomatique==19459016diploméeInput}}19459006] /> < Champ ... composant = {DropDown} />[19659044subst {Case à cocher} />

Le formulaire transmet à ces composants personnalisés une variété d'accessoires, et ces accessoires vous permettent de rendre vos champs en fonction de vos exigences de conception et commerciales. Par exemple, voici comment notre exemple rend le composant Input personnalisé.

  const  Input =  ( fieldProps ) =>  {
   const  {fieldType, label, onChange, value} = fieldProps;

   retour  (
     < div > 
       < label > 
        {label}
         < type d'entrée 
            =  {fieldType} 
           valeur  =  {valeur} 
           onChange  =  {onChange}  /> 
       </  label > 
     </  div > 
  );
}; 

REMARQUE : Bien que vous ayez un contrôle total sur la façon dont vous effectuez le rendu de vos champs, tous les champs KendoReact nécessitent que vous utilisiez des composants contrôlés. Vous pouvez en savoir plus sur les composants contrôlés dans la documentation React .

Et voici à quoi ressemble cet exemple sur StackBlitz .

Cette possibilité de rendre des composants personnalisés vous donne la possibilité pour consolider la façon dont vous affichez les contrôles de formulaire dans votre application. Il vous donne également un endroit logique pour implémenter des fonctionnalités de formulaire plus avancées, telles que la validation de formulaire. Voyons comment procéder ensuite.

Validation de formulaire

Le formulaire KendoReact fournit une série d'API qui facilitent l'ajout d'une logique de validation de formulaire personnalisée. Pour voir à quoi cela ressemble, revenons à notre entrée de courrier électronique, qui ressemble actuellement à ceci.

 <Champ
   label  =  "Email:" 
   name =  "email" 
  fieldType =  "e-mail" 
  composant = {Input} />

Pour ajouter la validation, commençons par ajouter un accessoire validateur au champ, que nous pointerons vers une fonction qui détermine si le contenu du champ est valide. Par exemple, voici comment vous assurer que le courrier électronique est un champ obligatoire.

 const  requiredValidator = ( valeur ) => {
   retourne   valeur ?  "" :  "Ce champ est obligatoire" ;
}

 < Champ 
   label  =  "Email:" 
   nom  =  "email" 
   fieldType  =  "email "
   composant  =  {Input} 
   validateur  =  {requiredValidator}  /> 

Dans notre exemple, nous voulons imposer que l'utilisateur a fourni une adresse e-mail, et également que l'utilisateur a fourni une adresse e-mail valide . Pour ce faire, nous allons ajouter un nouveau validateur de courrier électronique en utilisant le code ci-dessous.

 const emailValidator = ( value ) => (
   nouveau  RegExp ( /   S + @  S + .  S + /). Test ( valeur )?  "" :  "Veuillez saisir un e-mail valide." 
)

Et passez ensuite les validateurs requis et e-mail pour le validateur prop.

 < Champ 
   label  =  "Email:" 
   nom  =  "email" 
   fieldType  =  "email" 
   composant  =  {Input} 
   validateur  =  { [requiredValidator  emailValidator ]} /> 

Maintenant que vous avez un moyen de déterminer si les champs sont valides, votre dernière étape consiste à afficher visuellement ces informations à vos utilisateurs. Faisons-le en revenant à votre composant d'entrée personnalisé, qui ressemble actuellement à ceci.

  const  Input =  ( fieldProps ) =>  {
   const  {fieldType, label, onChange, value} = fieldProps;

   retour  (
     < div > 
       < label > 
        {label}
         < type d'entrée 
            =  {fieldType} 
           valeur  =  {valeur} 
           onChange  =  {onChange}  /> 
       </  label > 
     </  div > 
  );
}; 

Pour ajouter un message de validation, vous devez utiliser trois accessoires supplémentaires fournis: valide visité et validationMessage . Le code ci-dessous prend ces nouveaux accessoires et les utilise pour afficher un message de validation à l'utilisateur sur les champs contenant des erreurs.

  const  Input =  ( fieldProps ) =>  {
   const  {
    fieldType, label, onChange, value,
    valide, visité, validationMessage
  } = fieldProps;
   const  invalide =! Valide && visité;

   retour  (
     < div > 
       < label > 
        {label}
         < input 
           type  =  {fieldType} 
           className  =  {invalide ? " invalide " :  ""}
           value  =  {value} 
           onChange  =  {onChange}  /> 
       </  label > 
      { invalide &&
        ( < div   className  =  "requis" >  {validationMessage}  </  div > ) }
     </  div > 
  );
}; 

Le formulaire KendoReact fournit également un accessoire allowSubmit utile, vous permettant de désactiver facilement la soumission de formulaire jusqu'à ce que l'utilisateur corrige tous les problèmes.

 < Form 
   render  =  {(renderProps)  =>  (
    ...

     < bouton   désactivé  =  {! RenderProps.allowSubmit} > 
      Soumettre
     </  bouton > 
  )}>
 </  Formulaire > 

Voici à quoi tout cela ressemble en action.

sur ce qui peut être utile pour une validation complexe qui couvre de nombreux domaines.

Utilisation de composants riches

Le formulaire KendoReact est un package léger et autonome, mais il inclut la possibilité de s'intégrer avec le reste de KendoReact. [19659003] Et pour cause, KendoReact fournit une riche suite de contrôles de formulaire vous permettant de faire bien plus que ce qui est possible avec les éléments de navigateur intégrés.

const Input = ( fieldProps ) => {    const {     fieldType, label, onChange, value,     valide, visité, validationMessage   } = fieldProps;    const invalide =! Valide && visité;    retour (      < div > < label >         {label}          < input type = {fieldType} className = {invalide ? " invalide " : ""}            value = {value} onChange = {onChange} /> </ label >       { invalide &&         ( < div className = "requis" > {validationMessage} </ div > ) }      </ div >   ); };

Pour améliorer cette entrée, utilisons la entrée KendoReact que vous pouvez ajouter à votre projet en installant son package à partir de npm.

  npm   install  @ [1945901717] ] progrès  /  kendo  -  réagir  -  entrées 

Une fois le package installé, votre seule autre étape consiste à importer le composant Input dans votre application.

  import  { Input } from  " @progress  / kendo-react-inputs ";

Avec cette configuration à l'écart, la réécriture de l'entrée personnalisée est aussi simple que d'échanger pour et de supprimer certains des accessoires standard que KendoReact gère maintenant pour vous. Voici à quoi cela ressemble.

  const  CustomInput =  ( fieldProps ) =>  {
   const  {
    fieldType, valide, visité, validationMessage, ... autres
  } = fieldProps;
   const  invalide =! Valide && visité;

   retour  (
     < div > 
       < Type d'entrée 
          =  {fieldType} 
        { ... autres } /> 
      { invalide &&
        ( < div   className  =  "requis" >  {validationMessage}  </  div > ) }
     </  div > 
  );
}; 

Ce faisant, vous obtenez gratuitement de nouveaux comportements, tels que des étiquettes flottantes inspirées de Material Design.

KendoReact DropDownList et vous avez également la possibilité de styliser facilement vos contrôles de formulaire.

version finale de cette application dans StackBlitz .

Nous 'ai beaucoup mis en œuvre, mais nous ne faisons que commencer. Pour vos besoins plus avancés, vous pouvez apporter un ColorPicker MaskedTextBox Slider Switch DatePicker TimePicker DateRangePicker AutoComplete ComboBox DropDownList MultiSelect [19459] Éditeur .

Tous les contrôles de formulaire KendoReact fonctionnent avec le formulaire KendoReact, et tous adhèrent aux normes strictes d'accessibilité de KendoReact . C'est tout ce dont vous avez besoin pour créer les formulaires riches dont vos applications ont besoin.

Récapitulation

La création de formulaires avec React peut sembler difficile, mais ce n'est pas obligatoire. En utilisant le formulaire KendoReact, vous pouvez simplifier la gestion de votre état, implémenter la validation de formulaire et intégrer 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 de KendoReact pour React, qui contient plus de 70+ composants également pratiques. Lorsque vous êtes prêt à commencer avec le formulaire, ou si vous souhaitez découvrir les nombreux autres composants de KendoReact allez-y et commencez un essai de 30 jours de KendoReact pour les voir dans