Comment utiliser Formik pour créer des formulaires dans React

Formik facilite la création de formulaires dans React. Voici comment utiliser Formik pour créer des formulaires dans React .

Formik et formulaires dans React

Formik est une bibliothèque de gestion de formulaires qui fournit des composants et des hooks qui simplifient le processus de création de formulaires React. Dans cet article, apprenons avec Download.vn comment créer un formulaire d'inscription dans React en utilisant Formik !

Comment utiliser Formik pour créer des formulaires dans React

• Créer une application React
• Créer un formulaire dans React
• Ajouter Formik à React
• Activer l'authentification par formulaire
• Ajouter la gestion des erreurs
• Valider les données en utilisant Yup

Créer une application React

Utilisez create-react-app pour créer un nouveau projet React :

npx create-react-app formik-form

Accédez maintenant au dossier formik-form/src 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 le formulaire. N'oubliez pas de l'importer dans App.js .

Créer un formulaire dans React

Vous pouvez créer des formulaires dans React avec des composants contrôlés ou non.

• Les données de formulaire générées à partir du composant de contrôle seront gérées par React.
• Les données de formulaire générées à partir d'éléments non contrôlés sont gérées par le DOM.

React vous encourage à utiliser des composants contrôlés. Ils vous permettent de suivre les données du formulaire localement, vous avez donc un contrôle total sur le formulaire.

Vous trouverez ci-dessous un exemple de formulaire créé avec un composant contrôlé :

import { useState } from "react";
const Register = () => {
 const [email, setemail] = useState("");
 const [password, setpassword] = useState("");
 const handleSubmit = (event) => {
 event.preventDefault();
 console.log(email);
 };
 const handleEmail = (event) => {
 setemail(event.target.value);
 };
 const handlePassword = (event) => {
 setpassword(event.target.value);
 };
 return (
 

); }; export default Register;

Dans le code ci-dessus, vous initialisez l'état et créez une fonction de gestionnaire pour chaque champ de saisie. Bien que cela fonctionne, votre code peut devenir répétitif et compliqué, surtout s'il existe de nombreux champs de saisie. L'ajout de la validation et de la gestion des messages d'erreur constitue un autre défi.

Formik peut réduire la condition ci-dessus. Cela facilite la gestion des états, la validation et la saisie des données.

Ajouter Formik à React

Avant d'utiliser formik , ajoutez-le à votre projet en utilisant npm.

npm install formik

Pour intégrer Formik, vous utiliserez le hook useFormik. Dans Register.js, saisissez useFormik en haut du fichier :

import { useFormik } from "formik"

La première étape consiste à configurer les valeurs du formulaire. Dans ce cas, vous initialiserez votre email et votre mot de passe.

const formik = useFormik({
 initialValues: {
 email: "",
 password: "",
 },
 onSubmit: values => {
// handle form submission
 },
});

Vous devez également ajouter une fonction onSubmit, qui obtient les valeurs et gère la soumission du formulaire. Pour un formulaire d'inscription, cette action crée un nouvel utilisateur dans la base de données.

L'étape suivante consiste à utiliser l'objet formik pour obtenir les valeurs du formulaire dans et hors de l'état.

Dans le code ci-dessus, vous êtes :

• Fournissez des champs de saisie avec des valeurs d'identifiant et de nom équivalentes aux valeurs utilisées lors de l'initialisation à l'aide du hook useFormik .
• Accédez à la valeur d'un champ, en utilisant son nom pour l'extraire de formik.values ​​​​​​.
• Liez formik.handleChange à l' événement onChange pour afficher les valeurs d'entrée en tant que types d'utilisateurs.
• Utilisez formik.handleBlur pour garder une trace des champs visités.
• Liez formik.handleSubmit à l' événement onSubmit pour déclencher la fonction onSubmit que vous avez ajoutée au hook useFormik .

Activer l'authentification par formulaire

Lors de la création d'un formulaire, la validation des entrées est importante car elle garantit que l'authentification de l'utilisateur est facile et que les données sont enregistrées dans le format correct. Par exemple, vous pouvez vérifier la validité de l'email, le mot de passe comporte tous les caractères nécessaires...

Pour valider le formulaire dans cet exemple, sélectionnez la fonction appropriée, acceptez les valeurs du formulaire et renvoyez un objet d'erreur.

Si vous ajoutez une fonction de validation à useFormik , toutes les erreurs de validation trouvées seront dans Formik.errors , indexées sur le nom du champ de saisie. Par exemple, vous pouvez afficher les erreurs concernant les champs de courrier électronique à l'aide de Formik.errors.email .

Dans Register.js , créez une fonction de validation et incluez-la dans useFormik .

const formik = useFormik({
 initialValues: {
 email: "",
 password: "",
 },
 validate: () => {
 const errors = {};
 console.log(errors)
 if (!formik.values.email) {
 errors.email = "Required";
 } else if (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test(formik.values.email)
 ) {
 errors.email = "Invalid email address";
 }
 if (!formik.values.password) {
 errors.password = "Required";
 } else if (formik.values.password.length < 8)="" {="" errors.password="Must be 8 characters or more" ;="" }="" return="" errors;="" },="" onsubmit:="" (values)=""> {
 console.log("submitted!");
 // handle submission
 },
});

Ajouter la gestion des erreurs

Ensuite, affichez les messages d'erreur le cas échéant. Utilisez Formik.touched pour vérifier si ce champ a été visité ou non. Cela évite d'afficher une erreur dans le champ auquel l'utilisateur n'a pas encore accédé.

{formik.touched.email && formik.errors.email ?

{formik.errors.email}

: null} {formik.touched.password && formik.errors.password ?

{formik.errors.password}

: null}

Valider les données en utilisant Yup

Formik fournit un moyen plus simple de valider les formulaires à l'aide de la bibliothèque Yup. Installez Yup pour commencer :

npm install yup

Entrez oui dans Register.js .

import * as Yup from "yup"

Au lieu d'écrire votre propre fonction d'authentification, utiliser Yup pour vérifier la validité des emails et des mots de passe sera plus rapide.

const formik = useFormik({
 initialValues: {
 email: "",
 password: "",
 },
 validationSchema: Yup.object().shape({
 email: Yup.string()
 .email("Invalid email address")
 .required("Required"),
 password: Yup.string()
 .min(8, "Must be 8 characters or more")
 .required("Required")
 }),
 onSubmit: (values) => {
 console.log("submitted!");
// handle submission
 },
});

C'est fait! Vous avez créé un formulaire d'inscription simple en utilisant Formik et Yup .

Ci-dessus se trouve le moyen le plus simple d'utiliser Formik pour créer des formulaires dans React . J'espère que cet article vous sera utile !