Le développement de formulaires dans React se résume en trois choses: les données, les validations et les soumissions. Découvrez comment gérer ces problèmes vous-même ou utiliser Formik pour simplifier les choses.
À mesure que votre formulaire dans React devient plus compliqué, vous vous retrouvez en train de réinventer de plus en plus les fonctionnalités fournies avec Formik. Si vous avez du mal à contrôler manuellement un formulaire et à le valider, il est peut-être temps de passer à Formik ou à un autre package de formulaire, afin de faciliter la gestion de ce processus. Dans cet article, nous allons étudier les formes dans Vanilla React et les comparer aux formes avec Formik.
Lorsque vous pensez aux formulaires dans React, vous devez garder à l'esprit trois éléments:
- Comment accéder aux informations entrées par l'utilisateur?
- Comment garantir la validité des informations saisies?
- Comment puis-je envoyer leurs données au serveur?
Cet ordre est important car vous ne pouvez pas exécuter la deuxième étape sans d'abord avoir effectué la première étape et vous ne souhaitez pas soumettre de données non valides au serveur.
Cet article présentera les bases des formulaires dans React, avec et sans l'aide de packages supplémentaires. Nous verrons comment faire des «formulaires de réaction de vanille», puis comment réaliser la même chose en utilisant le paquet Formik de Jared Palmer.
Ma thèse est que plus la forme est simple, plus Réagissez sans paquets supplémentaires, mais à mesure que le nombre de champs augmente et que les validations deviennent plus difficiles, nous avons tendance à rester avec Formik pour éviter de reconstruire Formik nous-mêmes!
Tous les exemples dans leur intégralité peuvent être trouvés ici sur GitHub .
Formes de réaction de vanille
Lorsque je dis «Formes de réaction de vanille», je ne fais référence qu’à React… aucun paquet supplémentaire. Comme vous le verrez dans cette section, elle pourrait rapidement perdre le contrôle de son contrôle, car avec une seule entrée comportant quelques validations, elle est déjà en train de devenir un composant de taille décente.
Controlled Components
répondez «Comment accéder à ce que l'utilisateur a saisi?», nous utiliserons Controlled Components . Les composants contrôlés sont les endroits où l'entrée de l'utilisateur déclenchera une mise à jour de l'état du composant, ce qui entraînera une restitution du composant, affichant ce que l'utilisateur a entré.
En utilisant l'événement onChange sur un champ nous pouvons mettre à jour l'état. Puis, ayant la valeur prop égale à la valeur dans notre état, nous pouvons l'afficher à l'utilisateur.
export default function Contrôlé ( ]) {
const [ valeur setValue ] = Réagissez . useState ( "" ) ;
return (
< form >
< entrée
type = [19659020] " text "
placeholder = " Nom contrôlé "
onChange = {1965 event => setValue ( événement . target . valeur ) } ] valeur = { valeur }
/>
</ de forme >
) ;
} [19659057] Validation des données
Pour valider les entrées de notre utilisateur, nous allons maintenir un objet d'erreur dans notre état. Ceci sera rempli chaque fois que l'utilisateur modifiera une valeur dans le formulaire et avant sa soumission. Laissons de côté la soumission de formulaire pour le moment, examinons la fonction validate . Elle recommencera à chaque fois, en renseignant un objet error sur la base des valeurs actuelles de notre formulaire.
function validate ( valeurs ) {
let erreurs = {} ;
if (! valeurs . nom ) {19659022]
erreurs . name = "Obligatoire" ;
}
renvoyer erreurs ;
}
à l'aide de ] useEffect nous pouvons détecter le changement de valeur d’une des valeurs saisies en appelant la fonction validate et en plaçant son résultat dans notre état. Avec un objet errors nous pouvons éventuellement ajouter une classe à notre champ d'entrée en vérifiant si le champ contient une erreur: className = {errors.name? "has-error": null} . Sous le champ de saisie, nous transmettons le message d'erreur à un composant appelé Erreur qui transformera le message (s'il existe) en un élément avec les classes correctes.
export default function VanillaForm () {
const [ soumission de définie par
] = Réaction [. use ( false ) ;
const [ nom nomName ] = Réagissez . useState ( "" ) ;
const [ erreurs
Source link