Hur man använder Formik för att skapa formulär i React

Formik är ett formulärhanteringsbibliotek som tillhandahåller komponenter och krokar för att underlätta processen att skapa React-formulär. Formik tar hand om formulärtillstånd, validering och felhanterare åt dig vilket gör det enkelt att samla in och lagra användardata.

I den här handledningen får du lära dig hur du kan skapa ett registreringsformulär i React med hjälp av Formik. För att följa med bör du vara bekväm med att arbeta med React-krokar.

Skapa en React-app

Använd create-react-app för att skapa ett nytt React-projekt:

npx create-react-app formik-form

Navigera nu till formik-form/src mapp och radera alla filer utom App.js.

Skapa sedan en ny fil och namnge den Register.js. Det är här du lägger till ditt formulär. Kom ihåg att importera in den App.js.

Skapa ett reaktionsformulär

Du kan skapa React-formulär med antingen kontrollerade komponenter eller okontrollerade komponenter. En kontrollerad komponent är en vars formulärdata hanteras av React själv. En okontrollerad komponent är en vars formulärdata hanteras av DOM.

Den officiella Reagera docs rekommenderar att du använder kontrollerade komponenter. De låter dig hålla reda på formulärdata i lokal stat och har därför full kontroll över formuläret.

Nedan är ett exempel på ett formulär skapat med en kontrollerad komponent.

importera { useState } från "react";
const Register = () => {
 const [email, setemail] = useState("");
 const [lösenord, setlösenord] = useState("");
 const handleSubmit = (händelse) => {
 event.preventDefault();
 console.log (e-post);
 };
 const handleEmail = (händelse) => {
 setemail (event.target.value);
 };
 const handlePassword = (händelse) => {
 setpassword (event.target.value);
 };
 lämna tillbaka (


 id="e-post"
 name="e-post"
 type="e-post"
 placeholder="Din e-post"
 värde={email}
 onChange={handleEmail}
 />
 id="lösenord"
 name="lösenord"
 typ="lösenord"
 placeholder="Ditt lösenord"
 värde={lösenord}
 onChange={handlePassword}
 />




 );
};
export default Register;

I ovanstående kod är du initiera tillståndet och skapa en hanterarfunktion för varje inmatningsfält. Även om detta fungerar kan din kod lätt bli repetitiv och rörig, särskilt med många inmatningsfält. Att lägga till validering och felmeddelandehantering är en annan utmaning.

Formik syftar till att minska dessa problem. Det gör det enkelt att hantera formulärstatus, validera och skicka formulärdata.

Lägg till Formik för att React

Innan användning formik, lägg till det i ditt projekt med hjälp av npm.

npm installera formik

För att integrera Formik kommer du att använda användFormik krok. I Register.js, importera useFormik överst i filen:

importera { useFormik } från "formik"

Det första steget är att initiera formulärvärdena. I det här fallet kommer du att initialisera e-postadressen och lösenordet.

const formik = användFormik({
 initialValues: {
 e-post: "",
 Lösenord: "",
 },
 onSubmit: värden => {
// hantera formulärinlämning
 },
});

Du lägger också till funktionen onSubmit som tar emot formulärvärdena och hanterar formulärinlämningen. För ett registreringsformulär som detta kan detta innebära att man skapar en ny användare i databasen.

Nästa steg är att använda formik objekt för att få formulärvärdena in och ut ur tillståndet.

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

I ovanstående kod är du:

• Ge inmatningsfälten en id och namn värde lika med det som användes under initieringen i användFormik krok.
• Få åtkomst till värdet på ett fält genom att använda dess namn för att hämta det från formik.värden.
• Bindande formik.handleChange till händelsen onChange för att visa ingångsvärdena när användaren skriver.
• Använder sig av formik.handleBlur för att hålla reda på besökta fält.
• Bindande formik.handleSubmit till onSubmit händelse för att utlösa onSubmit funktion du lagt till i användFormik krok.

Aktivera formulärvalidering

När du skapar ett formulär är det viktigt att validera användarinmatning som den gör användarautentisering enkelt eftersom du bara lagrar data i rätt format. I ditt formulär kan du till exempel kontrollera om e-postmeddelandet är giltigt och om lösenordet har fler än 8 tecken.

För att validera formuläret, definiera en valideringsfunktion som accepterar formulärvärdena och returnerar ett felobjekt.

Om du lägger till valideringsfunktionen till användFormik, kommer alla valideringsfel som hittas att vara tillgängliga i Formik.fel, indexerad på ingångsnamnet. Du kan till exempel komma åt ett felmeddelande om e-postfältet med hjälp av Formik.errors.e-post.

I Register.js, skapa bekräfta funktion och inkludera den i användFormik.

const formik = användFormik({
 initialValues: {
 e-post: "",
 Lösenord: "",
 },
 validera: () => {
 const errors = {};
 console.log (fel)
 if (!formik.values.email) {
 errors.email = "Obligatoriskt";
 } annat om (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test (formik.values.email)
 ) {
 errors.email = "Ogiltig e-postadress";
 }
 if (!formik.values.password) {
 errors.password = "Obligatoriskt";
 } else if (formik.values.password.length < 8) {
 errors.password = "Måste vara 8 tecken eller fler";
 }
 returnera fel;
 },
 onSubmit: (värden) => {
 console.log("submitted!");
 // hantera inlämning
 },
});

Lägg till felhantering

Visa sedan felmeddelandena om de finns. Använda sig av Formik.berörd för att kontrollera om fältet har besökts. Detta förhindrar att ett fel visas för ett fält som användaren inte har besökt ännu.

 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="lösenord"
 name="lösenord"
 typ="lösenord"
 placeholder="Ditt lösenord"
 value={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.password && formik.errors.password? 
{formik.errors.password}
: null}

Validera data med Yup

Formik ger ett enklare sätt att validera formulär med hjälp av Japp bibliotek. Installera yup för att komma igång.

npm installera japp

Importera Japp i Register.js.

importera * som Japp från "Japp"

Istället för att skriva din egen anpassade valideringsfunktion, använd Yup för att kontrollera om e-postadressen och lösenordet är giltiga.

const formik = användFormik({
 initialValues: {
 e-post: "",
 Lösenord: "",
 },
 valideringsschema: Yup.object().shape({
 e-post: Yup.string()
 .email("Ogiltig e-postadress")
 .required("Obligatoriskt"),
 lösenord: Yup.string()
 .min (8, "måste vara 8 tecken eller fler")
 .required("Obligatoriskt")
 }),
 onSubmit: (värden) => {
 console.log("submitted!");
// hantera inlämning
 },
});

Och det är allt! Du har skapat ett enkelt registreringsformulär med Formik och Yup.

Slår ihop allt

Formulär är en integrerad del av alla applikationer eftersom de låter dig samla in användarinformation. I React kan det vara en smärtsam upplevelse att skapa formulär, särskilt om du har att göra med mycket data eller flera formulär. Ett verktyg som Formik ger ett enkelt och sömlöst sätt att hämta och validera formulärvärden.

10 React Best Practices du måste följa under 2022

Läs Nästa

Om författaren