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

Formik er et formularstyringsbibliotek, der leverer komponenter og kroge for at lette processen med at oprette React-formularer. Formik tager sig af formulartilstande, validering og fejlbehandlere for dig, hvilket gør det nemt at indsamle og gemme brugerdata.

I denne vejledning lærer du, hvordan du kan oprette en registreringsformular i React ved hjælp af Formik. For at følge med skal du være fortrolig med at arbejde med React-kroge.

Opret en React-app

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

npx create-react-app formik-form

Naviger nu til formik-form/src mappe og slet alle filer undtagen App.js.

Derefter skal du oprette en ny fil og navngive den Register.js. Det er her du tilføjer din formular. Husk at importere den ind App.js.

Opret en reaktionsformular

Du kan oprette React-formularer ved at bruge enten kontrollerede komponenter eller ukontrollerede komponenter. En kontrolleret komponent er en, hvis formulardata håndteres af React selv. En ukontrolleret komponent er en, hvis formulardata håndteres af DOM.

Den officielle Reager docs anbefaler at bruge kontrollerede komponenter. De lader dig holde styr på formulardataene i lokal stat og har derfor fuld kontrol over formularen.

Nedenfor er et eksempel på en formular oprettet ved hjælp af en kontrolleret komponent.

importer { useState } fra "react";
const Register = () => {
 const [email, setemail] = useState("");
 const [adgangskode, sætadgangskode] = useState("");
 const handleSubmit = (hændelse) => {
 event.preventDefault();
 console.log (e-mail);
 };
 const handleEmail = (begivenhed) => {
 setemail (event.target.value);
 };
 const handlePassword = (hændelse) => {
 sæt adgangskode (hændelse.mål.værdi);
 };
 Vend tilbage (


 id="e-mail"
 name="e-mail"
 type="e-mail"
 placeholder="Din e-mail"
 værdi={e-mail}
 onChange={handleEmail}
 />
 id="adgangskode"
 name="adgangskode"
 type="adgangskode"
 placeholder="Dit kodeord"
 værdi={adgangskode}
 onChange={handlePassword}
 />




 );
};
eksport standard Register;

I ovenstående kode er du initialisering af tilstanden og oprettelse af en behandlerfunktion for hvert inputfelt. Selvom dette virker, kan din kode nemt blive gentagne og rodet, især med mange inputfelter. Tilføjelse af validering og håndtering af fejlmeddelelser er en anden udfordring.

Formik har til formål at reducere disse problemer. Det gør det nemt at håndtere formulartilstand, validere og indsende formulardata.

Tilføj Formik til React

Før brug formik, føj det til dit projekt ved hjælp af npm.

npm installer formik

For at integrere Formik skal du bruge brug Formik krog. I Register.js, importer useFormik øverst i filen:

importer { useFormik } fra "formik"

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

const formik = brugFormik({
 initialværdier: {
 email: "",
 adgangskode: "",
 },
 onSubmit: værdier => {
// håndtere formularindsendelse
 },
});

Du tilføjer også onSubmit-funktionen, som modtager formularværdierne og håndterer formularafsendelsen. For en registreringsformular som denne kan det betyde, at der oprettes en ny bruger i databasen.

Det næste trin er at bruge formik objekt for at få formværdierne ind og ud af tilstand.

 id="e-mail"
 name="e-mail"
 type="e-mail"
 placeholder="Din e-mail"
 værdi={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 id="adgangskode"
 name="adgangskode"
 type="adgangskode"
 placeholder="Dit kodeord"
 værdi={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />

I ovenstående kode er du:

• Giver inputfelterne en id og navn værdi lig med den, der blev brugt under initialisering i brug Formik krog.
• Adgang til værdien af ​​et felt ved at bruge dets navn til at hente det fra formik.værdier.
• Indbinding formik.handleChange til hændelsen onChange for at vise inputværdierne, efterhånden som brugeren skriver.
• Ved brug af formik.handleBlur at holde styr på besøgte marker.
• Indbinding formik.handleSend til ved indsend hændelse for at udløse ved indsend funktion du føjede til brug Formik krog.

Aktiver formularvalidering

Når du opretter en formular, er det vigtigt at validere brugerinput, mens den laver brugergodkendelse nemt, da du kun gemmer data i det rigtige format. I din formular kan du for eksempel kontrollere, om den angivne e-mail er gyldig, og om adgangskoden har mere end 8 tegn.

For at validere formularen skal du definere en valideringsfunktion, der accepterer formularværdierne og returnerer et fejlobjekt.

Hvis du tilføjer valideringsfunktionen til brug Formik, vil enhver fundet valideringsfejl være tilgængelig i Formik.fejl, indekseret på inputnavnet. For eksempel kan du få adgang til en fejl om e-mail-feltet ved hjælp af Formik.fejl.e-mail.

I Register.js, opret validere funktion og inkludere den i brug Formik.

const formik = brugFormik({
 initialværdier: {
 email: "",
 adgangskode: "",
 },
 valider: () => {
 const fejl = {};
 console.log (fejl)
 if (!formik.values.email) {
 errors.email = "Påkrævet";
 } andet hvis (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test (formik.values.email)
 ) {
 errors.email = "Ugyldig e-mailadresse";
 }
 if (!formik.values.password) {
 errors.password = "Påkrævet";
 } else if (formik.values.password.length < 8) {
 errors.password = "Skal bestå af 8 tegn eller mere";
 }
 returnere fejl;
 },
 onSubmit: (værdier) => {
 console.log("indsendt!");
 // håndtere indsendelse
 },
});

Tilføj fejlhåndtering

Vis derefter fejlmeddelelserne, hvis de findes. Brug Formik.rørt for at tjekke om marken er besøgt. Dette forhindrer visning af en fejl for et felt, som brugeren endnu ikke har besøgt.

 id="e-mail"
 name="e-mail"
 type="e-mail"
 placeholder="Din e-mail"
 værdi={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.email && formik.errors.email? 
{formik.errors.email}
: nul}
 id="adgangskode"
 name="adgangskode"
 type="adgangskode"
 placeholder="Dit kodeord"
 værdi={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.password && formik.errors.password? 
{formik.errors.password}
: nul}

Valider data ved hjælp af Yup

Formik giver en nemmere måde at validere formularer ved hjælp af Jep bibliotek. Installer yup for at komme i gang.

npm installer yup

Importere Jep i Register.js.

import * som Yup fra "yup"

I stedet for at skrive din egen brugerdefinerede valideringsfunktion, skal du bruge Yup til at kontrollere, om e-mailen og adgangskoden er gyldige.

const formik = brugFormik({
 initialværdier: {
 email: "",
 adgangskode: "",
 },
 valideringsskema: Yup.object().shape({
 e-mail: Yup.string()
 .email ("Ugyldig e-mailadresse")
 .required("Påkrævet"),
 adgangskode: Yup.string()
 .min (8, "Skal bestå af 8 tegn eller mere")
 .required("Påkrævet")
 }),
 onSubmit: (værdier) => {
 console.log("indsendt!");
// håndtere indsendelse
 },
});

Og det er det! Du har oprettet en simpel registreringsformular ved hjælp af Formik og Yup.

At pakke alt ind

Formularer er en integreret del af enhver applikation, da de giver dig mulighed for at indsamle brugeroplysninger. I React kan det være en smertefuld oplevelse at oprette formularer, især hvis du har at gøre med mange data eller flere formularer. Et værktøj som Formik giver en nem og problemfri måde at hente og validere formularværdier på.

10 React Best Practices, du skal følge i 2022

Læs Næste

Om forfatteren