Formik est une bibliothèque de gestion de formulaires qui fournit des composants et des crochets pour faciliter le processus de création de formulaires React. Formik s'occupe pour vous des états de formulaire, de la validation et des gestionnaires d'erreurs, ce qui facilite la collecte et le stockage des données utilisateur.
Dans ce didacticiel, vous apprendrez comment créer un formulaire d'inscription dans React à l'aide de Formik. Pour suivre, vous devez être à l'aise avec les crochets React.
Créer une application React
Utilisez create-react-app pour créer un nouveau projet React:
npx créer-réagir-app formulaire-formik
Maintenant, naviguez vers le formulaire-formik/src dossier et supprimez tous les fichiers sauf App.js.
Ensuite, créez un nouveau fichier et nommez-le Register.js. C'est ici que vous ajouterez votre formulaire. N'oubliez pas de l'importer dans App.js.
Créer un formulaire de réaction
Vous pouvez créer des formulaires React en utilisant des composants contrôlés ou des composants non contrôlés. Un composant contrôlé est un composant dont les données de formulaire sont gérées par React lui-même. Un composant non contrôlé est un composant dont les données de formulaire sont gérées par le DOM.
L'officiel Réagissez aux documents recommandons d'utiliser des composants contrôlés. Ils vous permettent de garder une trace des données du formulaire dans l'état local et ont donc un contrôle total du formulaire.
Vous trouverez ci-dessous un exemple de formulaire créé à l'aide d'un composant contrôlé.
importer { useState } de "réagir" ;
const Registre = () => {
const [email, setemail] = useState("");
const [mot de passe, setpassword] = useState("");
const handleSubmit = (événement) => {
event.preventDefault();
console.log (courriel);
};
const handleEmail = (événement) => {
setemail (événement.cible.valeur);
};
const handlePassword = (événement) => {
setpassword (événement.cible.valeur);
};
retourner (
);
};
exporter le registre par défaut ;
Dans le code ci-dessus, vous êtes initialisation de l'état et créer une fonction de gestionnaire pour chaque champ d'entrée. Pendant que cela fonctionne, votre code peut facilement devenir répétitif et encombré, en particulier avec de nombreux champs de saisie. L'ajout de la validation et de la gestion des messages d'erreur est un autre défi.
Formulaire vise à réduire ces problèmes. Il facilite la gestion de l'état du formulaire, la validation et la soumission des données du formulaire.
Ajouter Formik pour réagir
Avant d'utiliser formik, ajoutez-le à votre projet en utilisant npm.
npm installer formik
Pour intégrer Formik, vous utiliserez le utiliserFormik crochet. Dans Register.js, importez useFormik en haut du fichier :
importer { useFormik } depuis "formik"
La première étape consiste à initialiser les valeurs du formulaire. Dans ce cas, vous initialiserez l'email et le mot de passe.
const formik = useFormik({
Valeurs initiales: {
e-mail: "",
le mot de passe: "",
},
onSubmit: valeurs => {
// gère la soumission du formulaire
},
});
Vous ajoutez également la fonction onSubmit qui reçoit les valeurs du formulaire et gère la soumission du formulaire. Pour un formulaire d'inscription comme celui-ci, cela pourrait signifier la création d'un nouvel utilisateur dans la base de données.
L'étape suivante consiste à utiliser le formik objet pour obtenir les valeurs de formulaire dans et hors de l'état.
Dans le code ci-dessus, vous êtes :
- Donner aux champs de saisie une identifiant et Nom valeur égale à celle utilisée lors de l'initialisation dans le utiliserFormik crochet.
- Accéder à la valeur d'un champ, utiliser son nom pour la récupérer formik.values.
- Contraignant formik.handleChange à l'événement onChange pour afficher les valeurs d'entrée au fur et à mesure que l'utilisateur tape.
- En utilisant formik.handleBlur pour garder une trace des champs visités.
- Contraignant formik.handleSoumettre au onSubmit événement pour déclencher le onSubmit fonction que vous avez ajoutée à la utiliserFormik crochet.
Activer la validation du formulaire
Lors de la création d'un formulaire, il est important de valider la saisie de l'utilisateur car elle Authentification d'utilisateur facile puisque vous stockez uniquement les données dans le bon format. Dans votre formulaire, vous pouvez par exemple vérifier si l'e-mail fourni est valide et si le mot de passe comporte plus de 8 caractères.
Pour valider le formulaire, définissez une fonction de validation qui accepte les valeurs du formulaire et renvoie un objet d'erreur.
Si vous ajoutez la fonction de validation à utiliserFormik, toute erreur de validation trouvée sera disponible dans Formik.errors, indexé sur le nom d'entrée. Par exemple, vous pouvez accéder à une erreur sur le champ email en utilisant Formik.errors.email.
Dans Register.js, créer le valider fonction et l'inclure dans utiliserFormik.
const formik = useFormik({
Valeurs initiales: {
e-mail: "",
le mot de passe: "",
},
valider: () => {
erreurs constantes = {} ;
console.log (erreurs)
si (!formik.values.email) {
erreurs.email = "Requis" ;
} sinon si (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test (formik.values.email)
) {
errors.email = "Adresse e-mail invalide" ;
}
si (!formik.values.password) {
errors.password = "Requis" ;
} sinon si (formik.values.password.length < 8) {
errors.password = "Doit contenir 8 caractères ou plus" ;
}
retourner les erreurs ;
},
onSubmit: (valeurs) => {
console.log("soumis!");
// gère la soumission
},
});
Ajouter la gestion des erreurs
Ensuite, affichez les messages d'erreur s'ils existent. Utiliser Formik.touché pour vérifier si le champ a été visité. Cela évite d'afficher une erreur pour un champ que l'utilisateur n'a pas encore visité.
Valider les données à l'aide de Yup
Formik offre un moyen plus simple de valider des formulaires à l'aide de Ouais bibliothèque. Installez yup pour commencer.
npm installer yup
Importer ouais dans Register.js.
importer * comme Yup à partir de "yup"
Au lieu d'écrire votre propre fonction de validation personnalisée, utilisez Yup pour vérifier si l'e-mail et le mot de passe sont valides.
const formik = useFormik({
Valeurs initiales: {
e-mail: "",
le mot de passe: "",
},
validationSchema: Yup.object().shape({
e-mail: Oui.string()
.email("Adresse e-mail invalide")
.required("Required"),
mot de passe: Yup.string()
.min (8, "Doit contenir 8 caractères ou plus")
.required("Requis")
}),
onSubmit: (valeurs) => {
console.log("soumis!");
// gère la soumission
},
});
Et c'est tout! Vous avez créé un formulaire d'inscription simple à l'aide de Formik et Yup.
Tout emballer
Les formulaires font partie intégrante de toute application car ils vous permettent de collecter des informations sur les utilisateurs. Dans React, la création de formulaires peut être une expérience pénible, surtout si vous traitez beaucoup de données ou plusieurs formulaires. Un outil comme Formik offre un moyen simple et transparent de récupérer et de valider les valeurs de formulaire.
10 bonnes pratiques de réaction que vous devez suivre en 2022
Lire la suite
Rubriques connexes
- Programmation
- Programmation
- Javascript
- Réagir
A propos de l'auteur
Mary Gathoni est une développeuse de logiciels passionnée par la création de contenu technique non seulement informatif mais également engageant. Lorsqu'elle ne code pas ou n'écrit pas, elle aime passer du temps avec des amis et être à l'extérieur.
Abonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner