Sådan bruger du Formik til at oprette formularer i React

Formik gør det nemmere at oprette formularer i React. Sådan bruger du Formik til at oprette formularer i React .

Formik & formularer i React

Formik er et formularhåndteringsbibliotek, der leverer komponenter og hooks, der gør processen med at skabe React-formularer enklere. Lad os i denne artikel lære med Download.vn , hvordan man opretter en registreringsformular i React ved hjælp af Formik !

Sådan bruger du Formik til at oprette formularer i React

• Opret en React-app
• Opret en formular i React
• Tilføj Formik til React
• Aktiver formulargodkendelse
• Tilføj fejlhåndtering
• Valider data ved hjælp af Yup

Opret en React-app

Brug create-react-app til at oprette et nyt React-projekt:

npx create-react-app formik-form

Naviger nu til formik-form/src- mappen og slet alle filer undtagen App.js . Opret derefter en ny fil og navngiv den Register.js . Det er her du tilføjer formularen. Husk at importere det til App.js .

Opret en formular i React

Du kan oprette formularer i React med kontrollerede komponenter eller ej.

• Formulardata genereret fra kontrolkomponenten vil blive håndteret af React.
• Formulardata genereret fra ukontrollerede elementer håndteres af DOM.

React opfordrer dig til at bruge kontrollerede komponenter. De giver dig mulighed for at spore formulardata lokalt, så du har fuld kontrol over formularen.

Nedenfor er et eksempel på en formular oprettet med en kontrolleret 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 ovenfor initialiserer du tilstand og opretter en behandlerfunktion for hvert inputfelt. Mens det virker, kan din kode blive gentagne og rodet, især hvis der er mange inputfelter. Tilføjelse af validering og håndtering af fejlmeddelelser er en anden udfordring.

Formik kan reducere ovenstående tilstand. Det gør tilstandshåndtering, validering og dataindtastning til en leg.

Tilføj Formik til React

Før du bruger formik , skal du tilføje det til dit projekt ved hjælp af npm.

npm install formik

For at integrere Formik skal du bruge useFormik krogen. I Register.js skal du indtaste useFormik øverst i filen:

import { useFormik } from "formik"

Det første trin er at opsætte formularværdierne. I dette tilfælde vil du initialisere din e-mail og adgangskode.

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

Du skal også tilføje en onSubmit-funktion, som henter værdierne og håndterer formularindsendelse. For en registreringsformular opretter denne handling en ny bruger i databasen.

Det næste trin er at bruge formik-objektet til at få formværdierne ind og ud af tilstand.

I koden ovenfor er du:

• Angiv inputfelter med id- og navneværdier svarende til de værdier, der blev brugt under initialisering ved hjælp af useFormik- krogen .
• Få adgang til værdien af ​​et felt ved at bruge dets navn til at udtrække det fra formik.values .
• Bind formik.handleChange til onChange- hændelsen for at vise inputværdier som brugertyper.
• Brug formik.handleBlur til at holde styr på besøgte marker.
• Bind formik.handleSubmit til onSubmit- hændelsen for at udløse den onSubmit-funktion, du tilføjede til useFormik- hook .

Aktiver formulargodkendelse

Når du opretter en formular, er inputvalidering vigtig, fordi den sikrer, at brugergodkendelse er nem, og at data gemmes i det korrekte format. For eksempel kan du kontrollere gyldigheden af ​​e-mailen, adgangskoden har alle de nødvendige tegn...

For at validere formularen i dette eksempel skal du vælge den relevante funktion, acceptere formularværdierne og returnere et fejlobjekt.

Hvis du tilføjer en valideringsfunktion til useFormik , vil eventuelle fundne valideringsfejl være i Formik.errors , indekseret på inputfeltets navn. For eksempel kan du se fejl om e-mail-felter ved hjælp af Formik.errors.email .

I Register.js skal du oprette en valideringsfunktion og inkludere 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
 },
});

Tilføj fejlhåndtering

Vis derefter fejlmeddelelser, hvis nogen. Brug Formik.touched til at kontrollere, om det felt er blevet besøgt eller ej. Dette undgår at vise en fejl i feltet, hvor brugeren endnu ikke har tilgået.

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

{formik.errors.email}

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

{formik.errors.password}

: null}

Valider data ved hjælp af Yup

Formik giver en nemmere måde at validere formularer ved hjælp af Yup-biblioteket. Installer Yup for at komme i gang:

npm install yup

Indtast yup i Register.js .

import * as Yup from "yup"

I stedet for at skrive din egen godkendelsesfunktion vil det være hurtigere at bruge Yup til at kontrollere gyldigheden af ​​e-mails og adgangskoder.

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 er gjort! Du har oprettet en simpel registreringsformular ved hjælp af Formik og Yup .

Ovenfor er den enkleste måde at bruge Formik til at oprette formularer i React . Håber denne artikel er nyttig for dig!