Hvordan bruke Formik til å lage skjemaer i React

Formik gjør det enklere å lage skjemaer i React. Slik bruker du Formik til å lage skjemaer i React .

Formik & skjemaer i React

Formik er et skjemaadministrasjonsbibliotek som gir komponenter og kroker som gjør prosessen med å lage React-skjemaer enklere. I denne artikkelen, la oss lære med Download.vn hvordan du lager et registreringsskjema i React ved å bruke Formik !

Hvordan bruke Formik til å lage skjemaer i React

• Lag en React-app
• Lag et skjema i React
• Legg til Formik for å React
• Aktiver skjemaautentisering
• Legg til feilhåndtering
• Valider data ved å bruke Yup

Lag en React-app

Bruk create-react-app for å lage et nytt React-prosjekt:

npx create-react-app formik-form

Naviger nå til formik-form/src- mappen og slett alle filer unntatt App.js . Deretter oppretter du en ny fil og gir den navnet Register.js . Det er her du legger til skjemaet. Husk å importere den til App.js .

Lag et skjema i React

Du kan lage skjemaer i React med kontrollerte komponenter eller ikke.

• Skjemadata generert fra kontrollkomponenten vil bli håndtert av React.
• Skjemadata generert fra ukontrollerte elementer håndteres av DOM.

React oppfordrer deg til å bruke kontrollerte komponenter. De lar deg spore skjemadata lokalt, slik at du har full kontroll over skjemaet.

Nedenfor er et eksempelskjema laget med en kontrollert 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 oppretter en behandlerfunksjon for hvert inndatafelt. Mens det fungerer, kan koden din bli repeterende og rotete, spesielt hvis det er mange inndatafelt. Å legge til validering og håndtering av feilmeldinger er en annen utfordring.

Formik kan redusere tilstanden ovenfor. Det gjør håndtering, validering og dataregistrering til en lek.

Legg til Formik for å React

Før du bruker formik , legg den til i prosjektet ditt ved å bruke npm.

npm install formik

For å integrere Formik bruker du useFormik-kroken. I Register.js skriver du inn useFormik øverst i filen:

import { useFormik } from "formik"

Det første trinnet er å sette opp skjemaverdiene. I dette tilfellet vil du initialisere e-post og passord.

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

Du må også legge til en onSubmit-funksjon, som henter verdiene og håndterer skjemainnsending. For et registreringsskjema oppretter denne handlingen en ny bruker i databasen.

Det neste trinnet er å bruke formik-objektet for å få skjemaverdiene inn og ut av tilstand.

I koden ovenfor er du:

• Gi inndatafelt med id- og navneverdier som tilsvarer verdiene som ble brukt under initialisering ved å bruke useFormik- kroken .
• Få tilgang til verdien til et felt ved å bruke navnet til å trekke det ut fra formik.values .
• Bind formik.handleChange til onChange- hendelsen for å vise inngangsverdier som brukertyper.
• Bruk formik.handleBlur for å holde styr på besøkte felt.
• Bind formik.handleSubmit til onSubmit- hendelsen for å utløse onSubmit-funksjonen du la til useFormik- kroken .

Aktiver skjemaautentisering

Når du oppretter et skjema, er inndatavalidering viktig fordi det sikrer brukerautentisering er enkel og dataene lagres i riktig format. For eksempel kan du sjekke gyldigheten av e-posten, passordet har alle nødvendige tegn...

For å validere skjemaet i dette eksemplet, velg den aktuelle funksjonen, godta skjemaverdiene og returner et feilobjekt.

Hvis du legger til en valideringsfunksjon til useFormik , vil eventuelle valideringsfeil som finnes i Formik.errors , indeksert på inndatafeltets navn. Du kan for eksempel se feil om e-postfelt ved å bruke Formik.errors.email .

I Register.js oppretter du en valideringsfunksjon og inkluderer 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
 },
});

Legg til feilhåndtering

Vis deretter feilmeldinger hvis noen. Bruk Formik.touched for å sjekke om det feltet er besøkt eller ikke. Dette unngår å vise en feil i feltet der brukeren ennå ikke har fått tilgang.

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

{formik.errors.email}

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

{formik.errors.password}

: null}

Valider data ved å bruke Yup

Formik gir en enklere måte å validere skjemaer ved å bruke Yup-biblioteket. Installer Yup for å komme i gang:

npm install yup

Skriv inn yup i Register.js .

import * as Yup from "yup"

I stedet for å skrive din egen autentiseringsfunksjon, vil det gå raskere å bruke Yup for å sjekke gyldigheten til e-poster og passord.

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 laget et enkelt registreringsskjema ved å bruke Formik og Yup .

Ovenfor er den enkleste måten å bruke Formik til å lage skjemaer i React . Håper denne artikkelen er nyttig for deg!