Beheer van reactieformaatstatus met formik

Sep 14, 2025

Procedures

(Afbeelding Credit: Matt Crouch)

Welkom in onze gids over het beheren van reactieformaatstatus met Formik. Vormelementen houden hun waarden in hun eigen interne toestand - op kansen met de door de staat gedreven benadering van reageren. Om de twee werk samen te stellen, hebben we een meer betrokken oplossing nodig, zoals het gebruik van gecontroleerde componenten voor elk veld.

Maar er zijn nog veel meer aspecten om een formulier te creëren dan alleen gegevens vastleggen. We moeten controleren of de opmaak correct is, alle vereiste velden zijn ingesteld en dat alles met succes is verzonden indien ingediend. Dat leidt tot veel gecompliceerde logica die snel kan opbouwen. Dit is waar Formik kan helpen.

Voor meer bronnen om uw webdesign te verbeteren, bekijk dan onze vervuilding van Webdesignhulpmiddelen en cloud opslag opties. Beginnen bij het begin? Kies de juiste website bouwer en krijg je web hosting Service rechts met onze roundups.

Download de bronbestanden

Wat is Formik?

Formulier is een lichtgewicht bibliotheek die deze problemen afhandelt. Door een formulier in te wikkelen met de meegeleverde componenten, krijgen we veel van dit gedrag gratis. Alles wat we nodig hebben om te leveren is de code om aan te pakken wat ons formulier uniek maakt.

Om ons te helpen ontdekken wat Formik kan doen, zullen we een kleine stemtoepassing bouwen. De gebruiker kan hun naam invoeren en stemmen op een van de meegeleverde opties. Als alles in orde is, zal het formulier indienen, maar, zo niet, dan ontvangt de gebruiker een foutmelding.

01. Ga aan de slag

Openen, opent u de map 'Tutorial' van de zelfstudiebestanden op de opdrachtregel. Installeer de afhankelijkheden en start de server. Deze app is gebouwd op CREAT-react-app en omvat zijn pakketten, samen met Formik zelf en een paar anderen om te helpen met het stylen.

 & GT; NPM-installatie
& GT; NPM Start

De ontwikkelingsserver start en de toepassing wordt vervolgens in de browser geopend. Het app.js-bestand bestuurt de hele applicatie die onze containercomponent voor het formulier weergeeft. Openen src / app.js en importeer de & lt; votecontainer & GT; component.

 Importeer Votecontainer van "./votecontainer";

Voeg het vervolgens toe aan de toepassing.

 & LT; Sectie ClassName = "Stem-container" & GT;
  & LT; Votecontainer / GT;
& lt; / sectie & gt;

02. Maak Formik-formulier

Formik-formulieren kunnen op twee manieren worden gemaakt. De metformik Met een hogere-orde-component kunt u een bestaande component inpakken of de & LT; FORMIK & GT; Component met een render prop die dezelfde functie uitvoert, wat is wat we zullen gebruiken.

Binnen Votecontainer.js, maak een functionele component die alle logica voor het formulier vasthoudt. Dit retourneert een & LT; FORMIK & GT; component die ons formulier maakt. Geef een startwaarde voor de velden die we later volgen via de initialven prop.

 Importeren {formik} van "Formik";
import stemmen van "./vote";

Functie Votecontainer () {
  terugkeer & lt; formik
    Initialvalues = {{name: "", Antwoord: ""}}
render = {rekwisieten = & gt; & lt; stemming {... rekwisieten} / & GT;} / GT;

03. Maak een stemcomponent

De & LT; STEM & GT; Component houdt de formulierstructuur vast. Door de Formik-logica-apart te hebben, kunnen we het formuliercomponent zo eenvoudig mogelijk houden.

Maak een stemcomponent in stemming.js die gebruik maakt van de & LT; Vorm & GT; component van formik. Voeg een knop toe om het formulier in te dienen als normaal.

 Import {Form} van "Formik";
FUNCTIE STEM () {
  terug (
    & LT; formulier ClassName = "Stem" & GT;
      & LT; INPUT TYPE = "INDIEND" VALUE = "Stem nu" / GT;
    & LT; / Form & GT;
  
}

04. Velden toevoegen

Formik houdt de wijzigingen in elk veld bij en geeft ze zodra het formulier wordt ingediend. Dit gebeurt dit door de gebeurtenissen uit het formulier en elk veld erin.

Op een formulierniveau zijn er twee specifieke evenementen - indienen en resetten. Wanneer een formulier inzendt, hebben we Formik nodig om het over te nemen en de controles uit te voeren, waarbij de Reset-evenement de staat opruimt. De geïmporteerde & LT; Vorm & GT; Component bindt deze gebeurtenissen aan Formik.

We kunnen nu beginnen met het toevoegen van ons eerste veld. Elke stemming moet vergezeld gaan van een naam, wat betekent dat we eerst een tekstinvoer nodig hebben.

De & LT; FIELD & GT; component doet dezelfde taak als & LT; Vorm & GT; doet voor de hele vorm. Het bindt de nodige gebeurtenissen en rekwisieten zoals een naam en waarde om veldstatus weer te geven.

Voeg een veld toe aan het formulier en sluit deze aan op een label. Deze werkzaamheden zoals ze zouden zouden in reguliere HTML-formulieren.

 Importeren {veld} van "Formik";
& LT; Label HTMLFOR = "NAAM" & GT; NAAM & LT; / LABEL & GT;
& LT; Field Autocomplete = "Naam" ID = "Naam" naam = "Naam" Type = "Tekst" / GT;

05. Logica leveren

We hoeven niet te werken met eventuele browserevenementen om in te dienen, zoals de onsubmit evenement wordt voor ons afgehandeld. Maar we moeten wel de logica leveren om inzending aan te pakken. De callback wordt nog steeds genoemd onsubmit Maar het ontvangt in plaats daarvan direct de formulierwaarden. Het ontvangt ook de 'tas' - een object dat een paar methoden bevat om met het formulier te communiceren terwijl het indient.

Aangezien deze gegevens doorgaans naar een server zouden gaan, kan deze functie ook asynchroon zijn. Formik heeft een special uitgifte Prop dat het automatisch trouwt zodra de inzending start. Met een ASYNC-functie kunnen we wachten totdat het formulier heeft ingediend en instellen dat terug naar False.

Terug in Votecontainer.js, we kunnen onze inzendlogica toevoegen. Maak de functie en geef het door naar de & LT; FORMIK & GT; component. Voor dit voorbeeld sturen we niet naar een server, maar we kunnen een vertraagde belofte gebruiken om de netwerklatentie te simuleren.

 COND ONSUBMIT = Async (waarden, tas) = & GT;
    Wacht op nieuwe belofte (Resolve = & GT; SetTimeout (Resolve, 1000));
    tas.setsubsmitting (false);
    console.log ("formulier ingediend", waarden);
  
Return & LT; Formik [...] Onsubmit = {Onsubmit} / & GT ;;

06. Weergavestaat

We moeten ook die indienende toestand in het formulier weergeven. Om een dubbele indiening te voorkomen, kunnen we de knop uitschakelen terwijl het formulier indient. Formik geeft dit in de vorm in stemming.js als een prop. We kunnen dit naar buiten trekken en deze op de knop toepassen.

 Functievot ({Issubmitting}) {[...]}
& LT; ingang uitgeschakeld = {Issubmitting} Type = "Verzenden" Waarde = "Stem nu" / GT;

07. Voeg een naamveld toe

Op het moment dat het formulier kan worden ingediend zonder dat een naam wordt ingevoerd. Omdat dit een verplicht veld is, moeten we dit met de gebruiker markeren.

De wortel & LT; FORMIK & GT; Component neemt ook een validate Prop, die een functie is die validatie uitvoert en een object retourneert. Elk key-value-pair vertegenwoordigt een veld en een foutmelding. Als een veld geen waarde heeft in dit object, wordt deze geacht geldig te zijn. Het formulier zal alleen indienen wanneer deze functie een leeg object retourneert. De functie ontvangt de formulierwaarden als een argument. Voor een verplicht veld hoeven we alleen maar te controleren of de waarde geen lege tekenreeks is.

Back Inside Votecontainer.js, maak een validate callback-functie om deze waarde te controleren en het aan Formik aan te sluiten.

 const validate = waarden = & gt;
    const fouten = {};
    if (waarden.name === "") {
      fouten.name = "Naam is vereist";
    
    retourfouten;
  
terugkeer & lt; formik [...] validate = {validate} / & gt ;;

08. Fouten weergeven

Deze fouten worden vervolgens doorgestuurd om te stemmen.js als een foutenprop. Om fouten inline weer te geven, moeten we overeenkomen met de fouten op het specifieke formulierveld.

 Functievot ({Issubmitting, fouten, aangeraakt}) {[...]}
& lt; div classname = "Input-groep" & GT;
  & LT; Label HTMLFOR = "NAAM" & GT; NAAM & LT; / LABEL & GT;
  & lt; div
    ClassName = {Classnames ({
      "Validatie-Group": TRUE,
      FOUT: !! FOUTE.NAME & AMP; & AMP; aangeraakt.name
    
  & GT;
    & lt; veld autocomplete = "naam" ID = "naam" naam = "naam" Type = "Tekst" / & GT;
    {!! Fouten.Name & AMP; & AMP; aangeraakt.name & amp; & amp;
      & LT; DIV CLASSNAME = "Fout-bericht" & GT; {fouten.name} & lt; / div & gt;
    
  & LT; / DIV & GT;
& LT; / DIV & GT;

Formik valideert het formulier elke keer dat het updates is. Een vorm met veel velden zou onmiddellijk worden overspoeld met fouten na de eerste verandering. Om dit te vermijden, geven we alleen de fout weer wanneer een veld is 'aangeraakt', wat betekent dat het op een gegeven moment is gewisseld. Wanneer een formulier indient, raakt Formik alle velden aan en toont de verborgen fouten.

09. Beantwoord veld toevoegen

Met het veld Naam compleet, kunnen we naar de antwoorden gaan. De aanpak die we tot nu toe hebben gebruikt, werkt goed voor gewone tekstinvoer, maar is niet geschikt voor meerdere ingangen die onder dezelfde veldnaam vallen, zoals een groep radioetsen.

Terwijl we meerdere kunnen opnemen & LT; FIELD & GT; Componenten met dezelfde naam, moeten we niet zoveel mogelijk herhalen. In plaats daarvan laat Formik ons een aangepaste component in & lt; veld & GT; dat kan ze als één beheren.

De & LT; ANTWERGROUP & GT; Component werkt vergelijkbaar met de tekstinvoer. Het neemt een opties voor een prop, die een array is die de opties bevat om weer te geven. Deze worden getransformeerd in stijlknoppen die gebruikers een antwoord kunnen kiezen. Omvatten deze component in stemming.js. Door het gebruiken van & LT; FIELD & GT; Het wordt gepasseerd met dezelfde rekwisieten als de naam van de naam en eventuele extra's, in dit geval de Opties constante.

 Antwoordgroep importeren van "./answergroup";
& LT; Veldcomponent = {ANTWERGROUP} Opties = {opties} Naam = "Antwoord" / & GT;

Ten slotte moeten we ook een antwoord vereisen in onze validatiefunctie in Votecontainer.js. Het proces daar is hetzelfde als met het veld Naam.

 if (waarden.answer === "") {
  fouten.answer = "Antwoord is vereist";

Door de validatie- en inzendingslogica afzonderlijk te houden en te gebruiken Formik om alles samen te stikken, kunnen we elk stuk klein en gemakkelijk te begrijpen houden.

Deze inhoud verscheen oorspronkelijk in netto tijdschrift Lees meer van onze Webontwerpartikelen hier

Lees verder:

Hoe reacties en apps te testen
6 enorme Web Design Trends voor 2020
Master Minimalisme in Web Design

Beheer van reactieformaatstatus met formik

Wat is Formik?

01. Ga aan de slag

02. Maak Formik-formulier

03. Maak een stemcomponent

04. Velden toevoegen

05. Logica leveren

06. Weergavestaat

07. Voeg een naamveld toe

08. Fouten weergeven

09. Beantwoord veld toevoegen

Procedures - Meest populaire artikelen

Maak texturen met de patroonstempelgereedschap

Hoe het labyrint-stijl monster van een pan

Maak realistische 3D-haar en bont in 3DS MAX en V-RAY

Custom Rig Controls in Maya

Hoe een stadsgezicht te schilderen met kleuren blokken

Hoe een digitaal beeld te geven in Zbrushcore

10 Gouden regels voor responsieve SVGS

Teken nauwkeurige botten en spier

Categorieën