Com utilitzar Formik per crear formularis a React

Formik facilita la creació de formularis a React. A continuació s'explica com utilitzar Formik per crear formularis a React .

Formik i formes a React

Formik és una biblioteca de gestió de formularis que proporciona components i ganxos que faciliten el procés de creació de formularis React. En aquest article, aprenem amb Download.vn com crear un formulari de registre a React amb Formik !

Com utilitzar Formik per crear formularis a React

• Creeu una aplicació React
• Creeu un formulari a React
• Afegeix Formik a React
• Activa l'autenticació de formularis
• Afegeix la gestió d'errors
• Valideu les dades amb Yup

Creeu una aplicació React

Utilitzeu create-react-app per crear un nou projecte React:

npx create-react-app formik-form

Ara navegueu a la carpeta formik-form/src i suprimiu tots els fitxers excepte App.js . A continuació, creeu un fitxer nou i anomeneu-lo Register.js . Aquí és on afegireu el formulari. Recordeu importar-lo a App.js.

Creeu un formulari a React

Podeu crear formularis a React amb components controlats o no.

• Les dades del formulari generades des del component de control seran gestionades per React.
• Les dades del formulari generades a partir d'elements no controlats són gestionades pel DOM.

React us anima a utilitzar components controlats. Us permeten fer un seguiment local de les dades del formulari, de manera que tingueu un control total sobre el formulari.

A continuació es mostra un exemple de formulari creat amb un component controlat:

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;

Al codi anterior, esteu inicialitzant l'estat i creant una funció de controlador per a cada camp d'entrada. Mentre funciona, el vostre codi pot tornar-se repetitiu i desordenat, sobretot si hi ha molts camps d'entrada. Afegir validació i gestió de missatges d'error és un altre repte.

Formik pot reduir la condició anterior. Fa que el maneig de l'estat, la validació i l'entrada de dades siguin molt fàcils.

Afegeix Formik a React

Abans d'utilitzar formik , afegiu-lo al vostre projecte amb npm.

npm install formik

Per integrar Formik, utilitzareu el ganxo useFormik. A Register.js, introduïu useFormik a la part superior del fitxer:

import { useFormik } from "formik"

El primer pas és configurar els valors del formulari. En aquest cas, inicialitzareu el vostre correu electrònic i contrasenya.

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

També heu d'afegir una funció onSubmit, que obté els valors i gestiona l'enviament del formulari. Per a un formulari de registre, aquesta acció crea un nou usuari a la base de dades.

El següent pas és utilitzar l'objecte formik per obtenir els valors del formulari dins i fora de l'estat.

Al codi anterior, sou:

• Proporcioneu camps d'entrada amb valors d'identificador i de nom equivalents als valors utilitzats durant la inicialització mitjançant el ganxo useFormik .
• Accediu al valor d'un camp, utilitzant el seu nom per extreure'l de formik.values ​​​​.
• Enllaceu formik.handleChange a l' esdeveniment onChange per mostrar els valors d'entrada com a tipus d'usuari.
• Utilitzeu formik.handleBlur per fer un seguiment dels camps visitats.
• Enllaceu formik.handleSubmit a l' esdeveniment onSubmit per activar la funció onSubmit que heu afegit al ganxo useFormik .

Activa l'autenticació de formularis

Quan es crea un formulari, la validació d'entrada és important perquè garanteix que l'autenticació de l'usuari sigui fàcil i que les dades es desen en el format correcte. Per exemple, podeu comprovar la validesa del correu electrònic, la contrasenya té tots els caràcters necessaris...

Per validar el formulari d'aquest exemple, seleccioneu la funció adequada, accepteu els valors del formulari i retorneu un objecte d'error.

Si afegiu una funció de validació per useFormik , qualsevol error de validació que es trobi es trobarà a Formik.errors , indexat al nom del camp d'entrada. Per exemple, podeu veure errors sobre camps de correu electrònic mitjançant Formik.errors.email .

A Register.js , creeu una funció de validació i incloeu-la a 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
 },
});

Afegeix la gestió d'errors

A continuació, mostreu els missatges d'error si n'hi ha. Utilitzeu Formik.touched per comprovar si aquest camp s'ha visitat o no. D'aquesta manera s'evita mostrar un error en el camp on l'usuari encara no ha accedit.

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

{formik.errors.email}

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

{formik.errors.password}

: null}

Valideu les dades amb Yup

Formik proporciona una manera més fàcil de validar formularis mitjançant la biblioteca Yup. Instal·leu Yup per començar:

npm install yup

Introduïu sí a Register.js .

import * as Yup from "yup"

En lloc d'escriure la vostra pròpia funció d'autenticació, fer servir Yup per comprovar la validesa dels correus electrònics i les contrasenyes serà més ràpid.

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
 },
});

Està fet! Heu creat un formulari de registre senzill mitjançant Formik i Yup .

A dalt hi ha la manera més senzilla d'utilitzar Formik per crear formularis a React . Espero que aquest article us sigui útil!