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 .

Hvordan bruke 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

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!

Leave a Comment

Slik legger du til Gmail på oppgavelinjen på Windows (HURTIGGUIDE)

Slik legger du til Gmail på oppgavelinjen på Windows (HURTIGGUIDE)

Slik legger du til Gmail på oppgavelinjen i Windows 10/11 ved hjelp av Chrome eller Microsoft Edge. Få en rask og enkel veiledning her.

Fix: App Store forsvant fra startskjermen

Fix: App Store forsvant fra startskjermen

Hvis App Store forsvant fra startskjermen på iPhone/iPad, ikke bekymre deg, det er en enkel løsning for å gjenopprette den.

Topp 10 spillnettsteder som ikke er blokkert av skolen i 2022

Topp 10 spillnettsteder som ikke er blokkert av skolen i 2022

Oppdag de beste ublokkerte spillnettstedene som ikke er blokkert av skoler for å forbedre underholdning og læring.

[100% løst] Hvordan fikser du Feilutskrift-melding på Windows 10?

[100% løst] Hvordan fikser du Feilutskrift-melding på Windows 10?

Mottar feilmelding om utskrift på Windows 10-systemet ditt, følg deretter rettelsene gitt i artikkelen og få skriveren din på rett spor...

Hvordan ta opp og spille av et Microsoft Teams-opptak

Hvordan ta opp og spille av et Microsoft Teams-opptak

Du kan enkelt besøke møtene dine igjen hvis du tar dem opp. Slik tar du opp og spiller av et Microsoft Teams-opptak for ditt neste møte.

Slik tilbakestiller du standardapper på Android

Slik tilbakestiller du standardapper på Android

Når du åpner en fil eller klikker på en kobling, vil Android-enheten velge en standardapp for å åpne den. Du kan tilbakestille standardappene dine på Android med denne veiledningen.

RETTET: Entitlement.diagnostics.office.com sertifikatfeil

RETTET: Entitlement.diagnostics.office.com sertifikatfeil

RETTET: Entitlement.diagnostics.office.com sertifikatfeil

FIKSET: Skriver i feiltilstand [HP, Canon, Epson, Zebra og Brother]

FIKSET: Skriver i feiltilstand [HP, Canon, Epson, Zebra og Brother]

Hvis du står overfor skriveren i feiltilstand på Windows 10 PC og ikke vet hvordan du skal håndtere det, følg disse løsningene for å fikse det.

Slik sikkerhetskopierer du Chromebook (2022)

Slik sikkerhetskopierer du Chromebook (2022)

Hvis du lurer på hvordan du sikkerhetskopierer Chromebooken din, har vi dekket deg. Finn ut mer om hva som sikkerhetskopieres automatisk og hva som ikke er her

Slik fikser du Xbox-appen som ikke åpnes i Windows 10 [HURTIGVEILEDNING]

Slik fikser du Xbox-appen som ikke åpnes i Windows 10 [HURTIGVEILEDNING]

Vil du fikse Xbox-appen vil ikke åpne i Windows 10, følg deretter rettelsene som Aktiver Xbox-appen fra tjenester, tilbakestill Xbox-appen, Tilbakestill Xbox-apppakken og andre..