Hur man använder Formik för att skapa formulär i React

Formik gör det enklare att skapa formulär i React. Så här använder du Formik för att skapa formulär i React .

Formik & former i React

Formik är ett formulärhanteringsbibliotek som tillhandahåller komponenter och krokar som gör processen att skapa React-formulär enklare. I den här artikeln ska vi lära oss med Download.vn hur man skapar ett registreringsformulär i React med Formik !

Hur man använder Formik för att skapa formulär i React

• Skapa en React-app
• Skapa ett formulär i React
• Lägg till Formik för att React
• Aktivera formulärautentisering
• Lägg till felhantering
• Validera data med Yup

Skapa en React-app

Använd create-react-app för att skapa ett nytt React-projekt:

npx create-react-app formik-form

Navigera nu till mappen formik-form/src och ta bort alla filer utom App.js . Skapa sedan en ny fil och namnge den Register.js . Det är här du lägger till formuläret. Kom ihåg att importera den till App.js .

Skapa ett formulär i React

Du kan skapa formulär i React med kontrollerade komponenter eller inte.

• Formulärdata som genereras från kontrollkomponenten kommer att hanteras av React.
• Formulärdata som genereras från okontrollerade element hanteras av DOM.

React uppmuntrar dig att använda kontrollerade komponenter. De låter dig spåra formulärdata lokalt, så att du har full kontroll över formuläret.

Nedan är ett exempelformulär skapat med en kontrollerad komponent:

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;

I koden ovan initierar du tillstånd och skapar en hanterarfunktion för varje inmatningsfält. Medan det fungerar kan din kod bli repetitiv och rörig, speciellt om det finns många inmatningsfält. Att lägga till validering och felmeddelandehantering är en annan utmaning.

Formik kan minska ovanstående tillstånd. Det gör tillståndshantering, validering och datainmatning enkelt.

Lägg till Formik för att React

Innan du använder formik , lägg till det i ditt projekt med npm.

npm install formik

För att integrera Formik använder du useFormik-kroken. I Register.js anger du useFormik överst i filen:

import { useFormik } from "formik"

Det första steget är att ställa in formulärvärdena. I det här fallet kommer du att initialisera din e-postadress och ditt lösenord.

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

Du måste också lägga till en onSubmit-funktion, som hämtar värdena och hanterar formulärinlämning. För ett registreringsformulär skapar den här åtgärden en ny användare i databasen.

Nästa steg är att använda formik-objektet för att få formulärvärdena in och ut ur tillståndet.

I koden ovan är du:

• Ange inmatningsfält med id- och namnvärden som motsvarar de värden som användes under initieringen med hjälp av useFormik- kroken .
• Få tillgång till värdet på ett fält, använd dess namn för att extrahera det från formik.values .
• Bind formik.handleChange till onChange -händelsen för att visa ingångsvärden som användartyper.
• Använd formik.handleBlur för att hålla reda på besökta fält.
• Bind formik.handleSubmit till onSubmit- händelsen för att trigga onSubmit-funktionen som du lade till i useFormik- kroken .

Aktivera formulärautentisering

När du skapar ett formulär är indatavalidering viktigt eftersom det säkerställer att användarautentisering är enkel och att data sparas i rätt format. Till exempel kan du kontrollera giltigheten av e-postmeddelandet, lösenordet har alla nödvändiga tecken...

För att validera formuläret i det här exemplet, välj lämplig funktion, acceptera formulärvärdena och returnera ett felobjekt.

Om du lägger till en valideringsfunktion för useFormik kommer eventuella valideringsfel som hittas att finnas i Formik.errors , indexerade på inmatningsfältets namn. Du kan till exempel visa fel om e-postfält med Formik.errors.email .

Skapa en valideringsfunktion i Register.js och inkludera den i 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
 },
});

Lägg till felhantering

Visa sedan eventuella felmeddelanden. Använd Formik.touched för att kontrollera om det fältet har besökts eller inte. Detta undviker att visa ett fel i fältet där användaren ännu inte har öppnat.

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

{formik.errors.email}

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

{formik.errors.password}

: null}

Validera data med Yup

Formik ger ett enklare sätt att validera formulär med hjälp av Yup-biblioteket. Installera Yup för att komma igång:

npm install yup

Ange yup i Register.js .

import * as Yup from "yup"

Istället för att skriva din egen autentiseringsfunktion går det snabbare att använda Yup för att kontrollera giltigheten av e-post och lösenord.

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

Det är gjort! Du har skapat ett enkelt registreringsformulär med Formik och Yup .

Ovan är det enklaste sättet att använda Formik för att skapa formulär i React . Hoppas den här artikeln är användbar för dig!