Hantera reageringsformat tillstånd med Formik

Feb 4, 2026
Hur
Manage React form
(Bildkredit: Matt Crouch)

Välkommen till vår guide om hur man hanterar reageringsformat tillstånd med Formik. Formelementen håller sina värden i sitt eget interna tillstånd - i odds med reagerar statligt drivna tillvägagångssätt. För att göra de två arbetena behöver vi en mer involverad lösning, till exempel att använda kontrollerade komponenter för varje fält.

Men det finns många fler aspekter att skapa en form än bara att fånga data. Vi måste kontrollera formateringen är korrekt, alla obligatoriska fält har ställts in och att allt skickades framgångsrikt när de skickades in. Det leder till en hel del komplicerad logik som kan byggas upp snabbt. Det här är där Formik kan hjälpa till.

För mer resurser för att förbättra din webbdesign, kolla in vår nedgång av Webbdesignverktyg och molnlagring alternativ. Börjar från början? Välj det rätta Website Builder och få din webbhotell Tjänsten rätt med våra roundups.

Vad är Formik?

Formik är ett lättviktigt bibliotek som hanterar dessa problem. Genom att förpacka en form med de medföljande komponenterna får vi mycket av detta beteende gratis. Allt vi behöver leverera är koden för att hantera det som gör vår form unik.

För att hjälpa oss att utforska vilken formik som kan göra, kommer vi att bygga en liten röstprogram. Användaren kan ange sitt namn och rösta på ett av de medföljande alternativen. Om allt är bra kommer formuläret att skicka in, men om inte, får användaren ett felmeddelande.

01. Kom igång

För att starta, öppna katalogen "Tutorial" från handledningsfilerna på kommandoraden. Installera beroenden och starta servern. Den här appen är byggd på Skapa-React-App och innehåller sina paket, tillsammans med Formik själv och ett par andra för att hjälpa till med styling. 

 & gt; npm installera
& gt; npm start

Utvecklingsservern startar och programmet öppnas sedan i webbläsaren. App.js-filen styr hela applikationen som kommer att göra vår behållarkomponent för formuläret. Öppna src / app.js och importera & lt; votecontainer & gt; komponent. 

 Importera votecontainer från "./votecontainer";

Lägg sedan till den i applikationen. 

 & lt; avsnitt className = "Vote-container" & GT;
  & lt; votecontainer / & gt;
& lt; / sektion och gt;

02. Skapa Formik Form

Formik-formulär kan skapas på två sätt. De withformik Högre ordningens komponent gör att vi kan linda en befintlig komponent eller använda & lt; formik & gt; Komponent med en render prop som utför samma funktion, vilket är vad vi ska använda.

Inne i votecontainer.js, skapa en funktionell komponent som håller all logiken för formuläret. Detta returnerar a & lt; formik & gt; Komponent som gör vår form. Ge ett startvärde för de fält vi lägger till senare genom initialvärderar stötta. 

 Importera {Formik} från "Formik";
Importera omröstning från "./vote";

funktion votecontainer () {
  Return & LT; Formik
    InitialValues ​​= {{name: "", svar: ""}}
render = {props = & gt; & lt; rösta {... props} / & gt;} / & gt;

03. Skapa röstkomponent

De & lt; Rösta & GT; Komponenten håller formstrukturen. Genom att ha formik logiken separat kan vi hålla formuläret så enkelt som möjligt.

Skapa en röstkomponent inuti röst.js som använder sig av & lt; form & gt; Komponent från Formik. Lägg till en knapp för att skicka in formuläret som vanligt. 

 Importera {Form} från "Formik";
Funktionsröst () {
  lämna tillbaka (
    & lt; form className = "Rösta" & GT;
      & lt; Input Type = "Skicka" värde = "Rösta nu" / & GT;
    & LT; / Form & GT;
  );
}

04. Lägg till fält

Formik håller reda på ändringarna i varje fält och kommer att ge dem när formuläret skickas in. Det gör allt detta genom händelserna från formuläret och varje fält inom den.

På en formulärivå finns det två specifika händelser - Skicka och återställas. När en blankett har lämnat, behöver vi Formik att ta över och utföra sina kontroller, med återställningshändelsen som rensar staten. Den importerade & lt; form & gt; Komponent binder dessa händelser till Formik.

Vi kan nu börja lägga till vårt första fält. Varje röst måste åtföljas av ett namn, vilket innebär att vi behöver en textinmatning först.

De Fält & GT; Komponent gör samma jobb som & lt; form & gt; gör för hela formen. Det binder de nödvändiga händelserna och rekvisita som ett namn och värde för att visa fältstatus.

Lägg till ett fält i formuläret och anslut den till en etikett. Dessa fungerar som de skulle i vanliga HTML-former. 

 Importera {fält} från "Formik";
& LT; Label HTMLFOR = "NAME" & GT; NAME & LT; / Etikett & GT;
& lt; fält autocomplete = "Namn" ID = "Namn" Namn = "Namn" Typ = "Text" / & GT;

05. Leveranslogik

Vi behöver inte arbeta med några webbläsarevenemang för att skicka in, som onsubmit evenemang hanteras för oss. Men vi behöver leverera logiken för att hantera inlämning. Återuppringningen kallas fortfarande onsubmit Men det tar istället formvärdena direkt. Det tar också emot "väskan" - ett objekt som innehåller några metoder för att interagera med formuläret medan den skickar.

Eftersom dessa data typiskt skulle gå till en server kan den här funktionen också vara asynkron. Formik har en speciell utfärdande Prop att den sätter sig automatiskt när inlämningen börjar. Med en Async-funktion kan vi vänta tills formuläret har skickat och ställt tillbaka till falska.

Tillbaka i votecontainer.js kan vi lägga till vår inloggningslogik. Skapa funktionen och skicka den till & lt; formik & gt; komponent. För det här exemplet kommer vi inte att skicka till en server men vi kan använda ett försenat löfte för att simulera nätverks latens. 

 const onsubmit = async (värden, påse) = & gt; {
    väntar på nytt löfte (Resolve = & GT; SettimeOut (Resolve, 1000));
    påse.setsubmitting (false);
    Console.log ("formulär inlämnad", värden);
  };
retur och lt; formik [...] onsubmit = {onsubmit} / & gt ;;

06. Visa tillstånd

Vi måste också visa det som skickas in i formuläret. För att förhindra dubbel inlämning kan vi inaktivera knappen medan formuläret skickar in. Formik passerar detta i formuläret inuti omröstning.js som prop. Vi kan dra ut det och tillämpa det på knappen. 

 Funktionsröst ({IsiBmitting}) {[...]}
& LT; Input inside = {IsiBmitting} Type = "Skicka" värde = "Rösta nu" / & GT;

07. Lägg till namnfält

För närvarande kan formuläret lämnas in utan att ett namn anges. Eftersom det här är ett obligatoriskt fält, bör vi flagga detta till användaren.

Roten & lt; formik & gt; Komponent tar också en validera prop, vilket är en funktion som utför validering och returnerar ett objekt. Varje nyckelvärdepar representerar ett fält och ett felmeddelande. Om ett fält har inget värde i det här objektet anses det vara giltigt. Formuläret skickar endast när den här funktionen returnerar ett tomt objekt. Funktionen får formvärdena som ett argument. För ett obligatoriskt fält behöver vi bara kontrollera värdet är inte en tom sträng.

Tillbaka inuti votecontainer.js, skapa en validera återuppringningsfunktion för att kontrollera detta värde och koppla upp det till Formik. 

 Const validera = värden = & gt; {
    CONST-fel = {};
    om (värden.name === "") {
      Fel.Name = "Namn krävs";
    }
    Returfel;
  };
returnera & lt; formik [...] validera = {validera} / & gt ;;

08. Visa fel

Dessa fel skickas sedan till rösta.js som en felprop. För att visa fel inline måste vi matcha felen på det speciella formfältet. 

 Funktionsröst ({IsiBmitting, Fel, Touched}) {[...]}
& lt; div className = "Input-group" & GT;
  & LT; Label HTMLFOR = "NAME" & GT; NAME & LT; / Etikett & GT;
  & lt; div
    className = {classnames ({
      "Validation-Group": sant,
      Fel: !! Fel.Name & amp; & amp; rörd.name
    })}
  & gt;
    & lt; fält autocomplete = "Namn" ID = "Namn" Namn = "Namn" Typ = "Text" / & GT;
    {!! fel.name & amp; & amp; rörd.Name & amp; & amp; (
      & lt; div className = "felmeddelande" & gt; {fel.name} & lt; / div & gt;
    )}
  & lt; / div & gt;
& lt; / div & gt;

Formik kommer att validera formuläret varje gång den uppdateras. En form med massor av fält skulle omedelbart swamped med fel efter den första ändringen. För att undvika detta visar vi bara felet när ett fält har varit "rört", vilket betyder att det har interagerat med någon gång. När en formulär skickar, kommer Formik att röra alla fält och visa några dolda fel.

09. Lägg till svarfältet

Manage React

(Bild: © Matt Crouch)

Med namnfältet komplett kan vi flytta till svaren. Tillvägagångssättet som vi har använt hittills fungerar bra för vanliga textinmatningar men är inte lämpad för flera ingångar som faller under samma fältnamn, till exempel en grupp av radioknappar.

Medan vi kan inkludera flera Fält & GT; Komponenter med samma namn, vi bör undvika att upprepa oss så mycket som möjligt. Istället låter Formik oss skicka en anpassad komponent till & lt; fält & gt; som kan hantera dem som en.

De & lt; Answergroup & GT; Komponent fungerar som textinmatningen. Det tar ett alternativ Prop, som är en array som innehåller alternativen som ska visas. Dessa omvandlas till stilade radioknappar som låter användare välja ett svar. Inkludera denna komponent i omröstning.js. Genom att använda Fält & GT; Det går vidare med samma rekvisita som namninmatning såväl som alla extrafunktioner, i det här fallet ALTERNATIV konstant. 

 Importera svargrupp från "./answergroup";
& lt; fältkomponent = {Answergroup} Alternativ = {Alternativ} Namn = "Svar" / & GT;

Manage React

(Bild: © Matt Crouch)

Slutligen måste vi kräva ett svar i vår valideringsfunktion i votecontainer.js också. Processen är detsamma som med namnfältet. 

 Om (värderingar.answer === "") {
  Fel.ANSWER = "Svar krävs";

Genom att hålla validering och inlämningslogik separat och använder Formik att sticka allt tillsammans, kan vi hålla varje bit liten och lätt att förstå.

Detta innehåll uppträdde ursprungligen i nätmagasin . Läs mer av vårt Webbdesignartiklar här .

Läs mer:

  • Hur man testar reagerar webbplatser och appar
  • 6 stora webbdesign trender för 2020
  • Master Minimalism i webbdesign

Hur - Mest populära artiklar

Stoppa botsna med Google Recaptcha

Hur Feb 4, 2026

(Bildkredit: Framtida) Att hålla bots ut är alltid ett nummer spel - tyvärr, tillgängligheten av lättanvänd mas..

Skapa collage effekter i webbläsaren med CSS

Hur Feb 4, 2026

Om du någonsin önskat att du kunde replikera effekterna av en traditionell collage maker i din Webbplats..

Lägg till UI-animeringar på din webbplats

Hur Feb 4, 2026

De flesta ser användargränssnitt dagligen, oavsett om det är inne i en mobil app eller på en webbplats, så det är viktigt a..

Hur man målar en färgstark zombie

Hur Feb 4, 2026

Jag har alltid gillat Undead, och kommer ofta att rota för den ragged underdog som är så ofta reducerad till ett rörligt mål..

Skär din hårda ytmodellering i 3DS max

Hur Feb 4, 2026

I den här handledningen ska jag dela med sig av de tekniker och metoder som jag använder för att skapa hårdmodeller i ..

Hur man utvecklar mytiska varelser

Hur Feb 4, 2026

De som vill skapa realistiska varelser som använder en blandning av programvara - Zbrush, underbar designer, Keyshot och ..

Hur man målar magiska glödande runor

Hur Feb 4, 2026

I den här handledningen visar jag dig hur man målar mystiska runor som verkar glöda. Min formel för att måla glödande saker..

Använd partiklar för att skapa en 3D-stänk

Hur Feb 4, 2026

Denna handledning tar en titt på hur du kan göra en flytande stänk eller kronans effekt och kan användas för att göra stän..

Kategorier