Former i React – Del 2: Formik

Former i React — Del 2: Formik

Del 1 tittar på former Reagerar jag tittade på hur man hanterar formulär med hjälp av grundläggande Reagera komponenter och Reagera. Det är dock möjligt att förenkla våra liv ganska avsevärt när du skapar grundläggande former med hjälp av ett bibliotek som heter Formik.

Använda withFormik

När Ska Vi Använda Formik?

Formik förenklar saker och ting, därför att vi inte vill använda Formik överallt. Om du gör en enkel, en sida, där finns det ingen villkorlig logik bortom visa och dölja fält, Formik är perfekt. Men om du vill ha en flerstegs form, eller har komplicerade logik, skulle jag föreslår att du lämnar Formik ur ekvationen och hantering form och statlig förvaltning dig själv.

Hur Använder Vi Formik?

kan Du hitta grundläggande information om Formik på deras . Om du har läst den tidigare artikeln om former i Reagera, Formik hanterar alla statliga förvaltningen för oss. Vi kan slå vårt formulär komponent med en Högre ordningens Del (HOC) som Formik erbjuder för oss som heter withFormik. Detta sedan passerar egenskaper att den inslagna komponent för att hantera förändring, blur, och skicka in, liksom de aktuella värdena och eventuella fel, och vilka fält som vi har berört. Ett enkelt exempel på detta från den förra blogg inlägg, anpassade till användning Formik:


räkna>

Detta har minimala förändringar och bara växlar våra egna metoder för att hantera förändringar att Formiks, och ställa in värden från de Formik ger oss. Vi har också inaktivera knappen medan formen är att lämna in. Den withFormik på botten uppsättningar förvalda värden, och sätter upp hantering skicka. Bakom kulisserna, det fungerar mycket på samma sätt som vi sätter upp saker i sista blogginlägg. Men vi kan nu göra några generella komponenter som kommer att hantera allt för oss.


räkna>

här Ovan har vi bara hakade upp alla Formik metoder till respektive evenemang. Det viktigaste att notera är formik använder namnet på ingång för att ställa in lämplig fastighet på värden för objektet, så att vi båda ange namn egendom till det namn som anges, och värdet på fastigheten med samma namn på de värden som objekt.

Formik hanterar också fel. Jag skulle rekommendera att använda japp för detta och det är ett separat blogginlägg i sig, men det finns också gott om dokumentation på github för detta. Här har jag gett en enkel span för att visa tillsammans med vår insats om det är en fastighet inom fel objekt med samma namn som vårt område, och viktigast av allt, vårt område har berörts. Detta säkerställer att vi inte visa felmeddelande tills en användare har interagerat med vårt område.


räkna>

naturligtvis, vi kan hålla mer beskrivande komponenter för varje fält och använda FormikField i varje, det var lättare att visa användningen av FormikField genom att direkt ersätta det i exemplet ovan.

Lägga till nya fält och koppla upp dem är väldigt lätt nu. Formik gör allt det hårda arbetet för oss, ger oss fina möjligheter att tillhandahålla standardvärden, inaktivera skicka in medan formen är att lämna in och hantera inlämning av uppgifter. Det kommer också att hantera validering när den kombineras med en Japp eller anpassad validering som kan ge en bra användarupplevelse att informera användare om validering fel så tidigt som möjligt.

Det finns mycket mer som kan sägas om detta ämne, och mycket mer på djupet för att Formik, men ovanstående bör ge dig en uppfattning om när det kan göra saker enkelt, och när Formik kan vara av användning.