Hvordan bruke Formik til å lage skjemaer i React

Formik er et skjemaadministrasjonsbibliotek som gir komponenter og kroker for å lette prosessen med å lage React-skjemaer. Formik tar seg av skjematilstander, validering og feilbehandlere for deg som gjør det enkelt å samle inn og lagre brukerdata.

I denne opplæringen lærer du hvordan du kan lage et registreringsskjema i React ved hjelp av Formik. For å følge med, bør du være komfortabel med å jobbe med React-kroker.

Lag en React-app

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

npx create-react-app formik-form

Nå, naviger til formik-form/src mappe og slett alle filene unntatt App.js.

Deretter oppretter du en ny fil og gir den et navn Register.js. Det er her du legger til skjemaet ditt. Husk å importere den inn App.js.

Lag et reaksjonsskjema

Du kan lage React-skjemaer ved å bruke enten kontrollerte komponenter eller ukontrollerte komponenter. En kontrollert komponent er en hvis skjemadata håndteres av React selv. En ukontrollert komponent er en hvis skjemadata håndteres av DOM.

Den offisielle Reager docs anbefaler å bruke kontrollerte komponenter. De lar deg holde styr på skjemadataene i lokal stat og har derfor full kontroll over skjemaet.

Nedenfor er et eksempel på et skjema opprettet ved hjelp av en kontrollert komponent.

importer { useState } fra "react";
const Register = () => {
 const [email, setemail] = useState("");
 const [passord, settpassord] = useState("");
 const handleSubmit = (hendelse) => {
 event.preventDefault();
 console.log (e-post);
 };
 const handleEmail = (hendelse) => {
 setemail (event.target.value);
 };
 const handlePassword = (hendelse) => {
 settpassord (event.target.value);
 };
 komme tilbake (


 id="e-post"
 name="e-post"
 type="e-post"
 placeholder="Din e-post"
 verdi={email}
 onChange={handleEmail}
 />
 id="passord"
 name="passord"
 type="passord"
 placeholder="Ditt passord"
 verdi={passord}
 onChange={handlePassword}
 />




 );
};
eksport standard Register;

I koden ovenfor er du initialisering av staten og lage en behandlerfunksjon for hvert inndatafelt. Selv om dette fungerer, kan koden din lett bli repeterende og rotete, spesielt med mange inndatafelt. Å legge til validering og håndtering av feilmeldinger er en annen utfordring.

Formik har som mål å redusere disse problemene. Det gjør det enkelt å håndtere skjemastatus, validere og sende inn skjemadata.

Legg til Formik for å React

Før bruk formik, legg den til i prosjektet ditt ved hjelp av npm.

npm installer formik

For å integrere Formik, vil du bruke brukFormik krok. I Register.js, importer useFormik øverst i filen:

importer { useFormik } fra "formik"

Det første trinnet er å initialisere skjemaverdiene. I dette tilfellet vil du initialisere e-posten og passordet.

const formik = brukFormik({
 initialverdier: {
 e-post: "",
 passord: "",
 },
 onSubmit: verdier => {
// håndtere skjemainnsending
 },
});

Du legger også til onSubmit-funksjonen som mottar skjemaverdiene og håndterer skjemainnsendingen. For et registreringsskjema som dette kan dette bety å opprette en ny bruker i databasen.

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

 id="e-post"
 name="e-post"
 type="e-post"
 placeholder="Din e-post"
 value={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 id="passord"
 name="passord"
 type="passord"
 placeholder="Ditt passord"
 verdi={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />

I koden ovenfor er du:

• Å gi inndatafeltene en id og Navn verdi lik den som ble brukt under initialisering i brukFormik krok.
• Få tilgang til verdien til et felt ved å bruke navnet til å hente det fra formik.verdier.
• Binding formik.handleChange til onChange-hendelsen for å vise inngangsverdiene etter hvert som brukeren skriver.
• Ved hjelp av formik.handleBlur for å holde styr på besøkte felt.
• Binding formik.handleSend inn til ved innsending hendelse for å utløse ved innsending funksjonen du la til brukFormik krok.

Aktiver skjemavalidering

Når du oppretter et skjema, er det viktig å validere brukerinndata etter hvert som det lager bruker autentisering enkelt siden du kun lagrer data i riktig format. I skjemaet ditt kan du for eksempel sjekke om e-posten som er gitt er gyldig og om passordet har mer enn 8 tegn.

For å validere skjemaet, definer en valideringsfunksjon som godtar skjemaverdiene og returnerer et feilobjekt.

Hvis du legger til valideringsfunksjonen til brukFormik, vil enhver valideringsfeil som blir funnet være tilgjengelig i Formik.feil, indeksert på inndatanavnet. Du kan for eksempel få tilgang til en feilmelding om e-postfeltet ved å bruke Formik.errors.email.

I Register.js, opprette validere funksjon og inkludere den i brukFormik.

const formik = brukFormik({
 initialverdier: {
 e-post: "",
 passord: "",
 },
 valider: () => {
 const feil = {};
 console.log (feil)
 if (!formik.values.email) {
 errors.email = "Obligatorisk";
 } eller hvis (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test (formik.values.email)
 ) {
 errors.email = "Ugyldig e-postadresse";
 }
 if (!formik.values.password) {
 errors.password = "Obligatorisk";
 } else if (formik.values.password.length < 8) {
 errors.password = "Må bestå av 8 tegn eller mer";
 }
 returnere feil;
 },
 onSubmit: (verdier) => {
 console.log("innsendt!");
 // håndtere innsending
 },
});

Legg til feilhåndtering

Vis deretter feilmeldingene hvis de finnes. Bruk Formik.rørt for å sjekke om feltet er besøkt. Dette forhindrer visning av en feil for et felt brukeren ikke har besøkt ennå.

 id="e-post"
 name="e-post"
 type="e-post"
 placeholder="Din e-post"
 value={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.email && formik.errors.email? 
{formik.errors.email}
: null}
 id="passord"
 name="passord"
 type="passord"
 placeholder="Ditt passord"
 verdi={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {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 Jepp bibliotek. Installer yup for å komme i gang.

npm installer yup

Import Jepp i Register.js.

importer * som Yup fra "yup"

I stedet for å skrive din egen tilpassede valideringsfunksjon, bruk Yup for å sjekke om e-postadressen og passordet er gyldig.

const formik = brukFormik({
 initialverdier: {
 e-post: "",
 passord: "",
 },
 valideringsskjema: Yup.object().shape({
 e-post: Yup.string()
 .email("Ugyldig e-postadresse")
 .required("Obligatorisk"),
 passord: Yup.string()
 .min (8, "Må bestå av 8 tegn eller mer")
 .required("Obligatorisk")
 }),
 onSubmit: (verdier) => {
 console.log("innsendt!");
// håndtere innsending
 },
});

Og det er det! Du har laget et enkelt registreringsskjema ved å bruke Formik og Yup.

Pakker alt sammen

Skjemaer er en integrert del av enhver applikasjon da de lar deg samle inn brukerinformasjon. I React kan det å lage skjemaer være en smertefull opplevelse, spesielt hvis du har å gjøre med mye data eller flere skjemaer. Et verktøy som Formik gir en enkel og sømløs måte å hente og validere skjemaverdier på.

10 beste fremgangsmåter du må følge i 2022

Les Neste

Om forfatteren