Gestionați starea de formare reacțională cu formik

Sep 17, 2025

să

(Credit de imagine: Matt Crouch)

Bine ați venit la Ghidul nostru privind modul de gestionare a statului de formular reacțional cu formik. Elementele de formă își țin valorile în propria lor stare internă - în contradicție cu abordarea bazată pe stat a reacției. Pentru a face cele două lucrări împreună, avem nevoie de o soluție mai implicată, cum ar fi utilizarea componentelor controlate pentru fiecare câmp.

Dar există multe aspecte pentru a crea un formular decât de a captura date. Trebuie să verificăm formatarea este corectă, toate câmpurile obligatorii au fost setate și că totul a fost trimis cu succes când este trimis. Care duce la o mulțime de logică complicată care poate construi rapid. Aici poate ajuta Formik.

Pentru mai multe resurse pentru a vă ajuta să vă îmbunătățiți designul, verificați rundown-ul nostru Instrumente de design web și Stocare in cloud Opțiuni. Pornind de la zero? Alegeți dreapta Builder de site-uri web și obțineți-vă web hosting Service dreapta cu rotile noastre.

Descărcați fișierele sursă

Ce este formik?

Formik. este o bibliotecă ușoară care gestionează aceste probleme. Prin înfășurarea unui formular cu componentele furnizate, avem o mulțime de comportament gratuit. Tot ce trebuie să furnizăm este codul pentru a gestiona ceea ce face formularul nostru unic.

Pentru a ne ajuta să explorăm ceea ce poate face formik, vom construi o mică aplicație de vot. Utilizatorul poate introduce numele și votul pe una dintre opțiunile furnizate. Dacă totul este bine, formularul va fi supus, dar, dacă nu, utilizatorul primește un mesaj de eroare.

01. Începeți

Pentru a începe, deschideți directorul "Tutorial" din fișierele Tutorial de pe linia de comandă. Instalați dependențele și porniți serverul. Această aplicație este construită pe aplicația Create-React și include pachetele sale, împreună cu formik însuși și câțiva alții pentru a ajuta la stilul.

 & gt; instalarea npm.
& gt; NPM Start

Serverul de dezvoltare va porni și aplicația se deschide apoi în browser. Fișierul App.JS controlează întreaga aplicație care va face ca componenta noastră de containere pentru formular. Deschide src / app.js. și importați. & lt; votContainer & gt; componentă.

 Import votContainer de la "./votecontainer";

Apoi adăugați-l în aplicație.

 & lt; secțiunea classname = "vot-container" & gt;
  & lt; votContainer / & gt;
& lt; / secțiune & gt;

02. Creați formularul Formik

Formele formei pot fi create în două moduri. cuformik. Componenta de ordin superior ne permite să înfășurăm o componentă existentă sau să folosim & lt; formik & gt; Componenta cu o Prop Render care efectuează aceeași funcție, ceea ce vom folosi.

În interiorul votului VotatContainer.js, creați o componentă funcțională care va ține toată logica formularului. Aceasta returnează a. & lt; formik & gt; Componentă care face forma noastră. Oferiți o valoare inițială pentru câmpurile pe care le vom adăuga mai târziu prin intermediul valoarea inițială recuzită.

 Import {formik} de la "formik";
vot de import de la "./Vote";

Funcție votContainer () {
  returnați & lt; formik
    InitialValue = {{nume: "", răspunsul: ""}}
Render = {props = & gt; & lt; vot {... props} / & gt;} / & gt;

03. Creați componenta de vot

& vot; vot & gt; Componenta conține structura formularului. Având logica formik separată, putem păstra componenta de formă cât mai simplă.

Creați o componentă de vot în vot.js care utilizează utilizarea & Form & GT; componenta din formik. Adăugați un buton pentru a trimite formularul ca normal.

 Importul {formular} de la "formik";
Votul funcției () {
  întoarcere (
    & lt; formular clasaname = "vot" & gt;
      & lt; Intrare Tip = "Trimiteți" Value = "Votați acum" / & GT;
    & lt; / form & gt;
  );
}

04. Adăugați câmpuri

Formik ține evidența modificărilor la fiecare câmp și le va furniza odată ce formularul este trimis. Aceasta face toate acestea prin evenimentele emise de formular și fiecare domeniu în cadrul acestuia.

La un nivel de formular există două evenimente specifice - trimiteți și resetați. Atunci când un formular susține, avem nevoie de formik pentru a prelua și a-și îndeplini cecurile, cu evenimentul de resetare de compensare a statului. Importul & Form & GT; Componenta se leagă de aceste evenimente la Formik.

Acum putem începe să adăugăm primul nostru câmp. Fiecare vot trebuie să fie însoțit de un nume, ceea ce înseamnă mai întâi nevoie de o intrare de text.

& lt; câmp & gt; Componenta face același loc de muncă ca & Form & GT; face pentru întreaga formă. Se leagă evenimentele și recuzele necesare, cum ar fi un nume și valoare pentru a afișa starea câmpului.

Adăugați un câmp în formular și conectați-l la o etichetă. Acestea funcționează așa cum ar fi în forme regulate HTML.

 Import {câmp} de la "formik";
& lt; eticheta htmlfor = "nume" & gt; name & lt; / etichete & gt;
& lt; câmpul autocomplete = "nume" id = "nume" nume = "nume" tip = text "/ & gt;

05. Logica de aprovizionare

Nu trebuie să lucrăm cu niciun eveniment de browser pentru a trimite, ca și onsubmit. Evenimentul este manipulat pentru noi. Dar trebuie să furnizăm logica pentru a face față depunerii. Callbackul este încă numit onsubmit. Dar, în schimb, primește direct valorile formularului. De asemenea, primește "sacul" - un obiect care conține câteva metode de a interacționa cu formularul în timp ce submintește.

Deoarece aceste date se îndreaptă în mod obișnuit la un server, această funcție poate fi, de asemenea, asincronă. Formik are o specială emitere proporție pe care o stabilește automat automat odată ce începe trimiterea. Cu o funcție Async, putem aștepta până când formularul a trimis și a stabilit că înapoi la FALSE.

Înapoi la votContainer.js, putem adăuga logica noastră de trimitere. Creați funcția și treceți-l la & lt; formik & gt; componentă. Pentru acest exemplu, nu vom trimite la un server, dar putem folosi o promisiune întârziată pentru a simula latența rețelei.

 const onsubmit = async (valori, sac) = & gt; {
    așteaptă o nouă promisiune (rezolvare = & gt; settimeout (rezolvare, 1000));
    bag.setsubmitting (fals);
    consola.log ("formularul trimis", valori);
  };
RETURN & LT; formik [...] onsubmit = {onsubmit} / & gt ;;

06. Afișați starea

De asemenea, trebuie să afișăm prezentarea statului în formular. Pentru a preveni o dublă trimitere, putem dezactiva butonul în timp ce formularul trimite. Formik trece acest lucru în formă în interiorul votului.js ca un suport. Putem scoate acest lucru și o aplicăm la buton.

 Votul funcției ({Issubmitting}) {[...]}
& lt; Intrare Dezactivat = {Issubmitting} Tip = "Trimiteți" Value = "Votați acum" / & GT;

07. Adăugați câmpul Nume

În momentul în care formularul poate fi trimis fără a fi introdus un nume. Deoarece acesta este un câmp obligatoriu, ar trebui să spunem acest lucru utilizatorului.

Radacina & lt; formik & gt; Componenta are, de asemenea, un suport validat, care este o funcție care îndeplinește validarea și returnează un obiect. Fiecare pereche de valori cheie reprezintă un câmp și un mesaj de eroare. Dacă un câmp nu are valoare în acest obiect, se consideră a fi valabil. Formularul se va trimite numai când această funcție returnează un obiect gol. Funcția primește valorile formularului ca argument. Pentru un câmp obligatoriu, trebuie doar să verificăm valoarea nu este un șir gol.

Înapoi în interiorul votului Votectainer.js, creați o funcție de validare a apelurilor pentru a verifica această valoare și pentru ao conecta la formik.

 const validate = valori = & gt; {
    const errors = {};
    dacă (valori.name === "") {
      errors.name = "numele este necesar";
    }
    erori de returnare;
  };
Return & lt; formik [...] validate = {validate} / & gt ;;

08. Afișați erori

Aceste erori sunt apoi transmise la vot.js ca o proporție de erori. Pentru a afișa erorile inline, trebuie să potrivim erorile în câmpul special al formularului.

 Votul funcției ({Issubmitting, Errors, atins}) {[...]}
& lt; div CLASSNAME = "INPUT-GROUP" & GT;
  & lt; eticheta htmlfor = "nume" & gt; name & lt; / etichete & gt;
  & lt; div
    CLASSNAME = {Nume de clasă ({{
      "Grupul de validare": Adevărat,
      Eroare: !! Errors.Name & amp; & amp; atins
    })}
  & gt;
    & lt; câmp autocomplete = "nume" id = "nume" nume = "nume" tip = "text" / & gt;
    {!! Errors.Name & amp; & amp; atins.Name & amp; & amp; (
      & lt; div CLASSNAME = "Mesaj de eroare" & gt; {errors.name} & lt; / div & gt;
    )}
  & lt; / div & gt;
& lt; / div & gt;

Formik va valida formularul de fiecare dată când actualizează. Un formular cu o mulțime de câmpuri ar fi imediat înmormântat cu erori după prima schimbare. Pentru a evita acest lucru, afișăm doar eroarea atunci când un câmp a fost "atins", adică a fost interacționat cu un moment dat. Când un formular submnează, formik va atinge toate câmpurile și va afișa erori ascunse.

09. Adăugați câmpul de răspuns

Cu câmpul de nume complet, putem trece la răspunsuri. Abordarea pe care am folosit-o până acum funcționează bine pentru intrările de text obișnuite, dar nu este potrivit pentru mai multe intrări care intră sub incidența aceluiași nume de câmp, cum ar fi un grup de butoane radio.

În timp ce putem include mai multe & lt; câmp & gt; Componente cu același nume, ar trebui să evităm repetarea cât mai mult posibil. În schimb, formik ne permite să trecem o componentă personalizată în & lt; câmp & gt; care le pot gestiona ca una.

& lt; aversgroup & gt; Componenta funcționează similar cu introducerea textului. Este nevoie de o opțiune, care este o matrice care conține opțiunile de afișare. Acestea sunt transformate în butoane radio stilate care permit utilizatorilor să aleagă un răspuns. Includeți această componentă în cadrul votului. Js. Prin utilizarea & lt; câmp & gt; Ea a trecut aceleași recuzită ca și introducerea numelui, precum și orice extra, în acest caz OPȚIUNI constant.

 Importați grupul de răspunsuri din "./answergroup";
& lt; Field Component = {RISEWGROUP} Opțiuni = {Opțiuni} Nume = "Răspuns" / & GT;

În cele din urmă, trebuie să solicităm un răspuns în funcția de validare în votContainer.js. Procesul este același cu câmpul Nume.

 Dacă (valori.answer === "") {
  errors.answer = "Răspunsul este necesar";

Prin păstrarea logicii de validare și de transmitere separată și folosind formik pentru a cusatura totul împreună, suntem capabili să păstrăm fiecare bucată mică și ușor de înțeles.

Acest conținut a apărut inițial în revista netă . Citiți mai multe despre noi Articole de design web aici .

Citeste mai mult:

Cum se testați reacționați site-urile și aplicațiile
6 tendințe uriașe de design web pentru 2020
Master Minimalism în Web Design

Gestionați starea de formare reacțională cu formik

Ce este formik?

01. Începeți

02. Creați formularul Formik

03. Creați componenta de vot

04. Adăugați câmpuri

05. Logica de aprovizionare

06. Afișați starea

07. Adăugați câmpul Nume

08. Afișați erori

09. Adăugați câmpul de răspuns

să - Cele mai populare articole

Lino PrintMapking: o introducere

Cum se înființează un mediu de dezvoltare locală

Un ghid pentru Google Web Tools

Cum se creează joc de artă stilizată

12 sfaturi pentru iluminarea 3D realistă

Creați vizuale 3D interactive cu trei.js

Creați un cinematografie cu Photoshop în 60 de secunde

Explorați codul creativ cu p5.js

Categorii