Kezelés React Form állapot formájával

Sep 12, 2025

kézikönyv

(Kép hitel: Matt Crouch)

Üdvözöljük az útmutatóban, hogyan kell kezelni a reagálási forma állapotot a Formik segítségével. A formanyomtatványok saját belsõ állapotukban tartják értékét - a reakciók állapotorientált megközelítésével. Ahhoz, hogy a két munkát együtt készítsünk, szükségünk van egy több résztvevő megoldásra, például az egyes mezők ellenőrzött elemeire.

De sok más szempont van az űrlap létrehozásához, mint az adatok rögzítése. Ellenőriznünk kell, hogy a formázás helyes, minden szükséges mezőt beállították, és mindent sikeresen elküldtek a benyújtáskor. Ez sok bonyolult logikához vezet, amely gyorsan felépíthet. Ez az, ahol a formik segíthet.

A webes tervezés javításához több erőforrás érdekében nézd meg a lefoglalásunkat Webes tervezési eszközök és felhő tároló lehetőségek. Kiindulva a semmiből? Válassza ki a jogot weboldal építője és kapd meg web hosting Szolgáltatás a kerekítéssel.

Töltse le a forrásfájlokat

Mi a formik?

Formik egy könnyű könyvtár, amely kezeli ezeket a problémákat. A mellékelt alkatrészekkel ellátott űrlap csomagolásával rengeteg ilyen viselkedést kapunk ingyen. Minden, amire szükségünk van, a kód, hogy kezelje, mi teszi az űrlapunkat.

Ahhoz, hogy segítsen nekünk felfedezni, amit a formik tehet, egy kis szavazási kérelmet építünk. A felhasználó beírhatja nevét és szavazhat a mellékelt opciók egyikére. Ha minden rendben van, az űrlap benyújtja, de ha nem, a felhasználó hibaüzenetet kap.

01. Kezdje el

Elindításához nyissa meg a "Tutorial" könyvtárat a parancssori oktatófájlokból. Telepítse a függőséget és indítsa el a kiszolgálót. Ez az alkalmazás a létrehozott reagálási alkalmazásra épül, és tartalmazza a csomagokat, valamint a Formik és néhány más, hogy segítsen a stílusban.

 & gt; NPM telepítés
& gt; NPM START

A fejlesztési kiszolgáló elindul, és az alkalmazás megnyílik a böngészőben. Az App.js fájl szabályozza az egész alkalmazást, amely a tartálykomponensünket az űrlaphoz rendezi. Nyit src / app.js és importálja a & lt; votecontainer & gt; összetevő.

 Import a "./votecontainer";

Ezután adja hozzá az alkalmazást.

 & lt; szekció osztálynév = "szavazó konténer" & gt;
  & lt; Votecontainer / & gt;
& lt; / szekció & gt;

02. Hozzon létre formik formát

A formik formák kétféleképpen hozhatók létre. A withformik A magasabb rendű összetevő lehetővé teszi számunkra, hogy egy meglévő összetevőt vagy a & lt; formik & gt; A komponens olyan renderhellyel rendelkezik, amely ugyanazt a funkciót végzi, ami az, amit használunk.

A Votecontainer.js belsejében hozzon létre egy funkcionális komponenst, amely az űrlap összes logikáját tartja. Ez visszatér a & lt; formik & gt; alkotóelem, amely elrendezi az űrlapot. Adjon meg egy kiindulási értéket az általunk hozzáadott mezők számára inicialevalues támaszt.

 Import {FORMIK} a "Formik" -tól;
Import szavazás "./vote";

function votecontainer () {
  Visszatérés & lt; formik
    inicialevalues = {{name: "", Válasz: ""}}
render = {props = & gt; & lt; szavazás {... props} / & gt;} / & gt;

03. Szavazás összetevő létrehozása

A & lt; szavazás & gt; komponens tartja az űrlap szerkezetet. Azáltal, hogy a formik logikai különállóan meg tudja tartani az űrlapkomponenst, amennyire csak lehetséges.

Hozzon létre egy szavazás összetevőt a Vote.js-ben, amely a & lt; forma & gt; A FORMIK komponens. Adjon hozzá egy gombot az űrlap megadásához.

 Import {formik} a "Formik" -tól;
Funkció Szavazás () {
  Visszatérés (
    & lt; forma osztálynév = "szavazás" & gt;
      & lt; input type = "Küldés" érték = "Szavazás most" / & gt;
    & lt; / form & gt;
  );
}

04. mezők hozzáadása

A Formik nyomon követi az egyes mezők módosítását, és az űrlap benyújtását követően biztosítja őket. Mindez az űrlapon és az egyes területeken kibocsátott eseményeken keresztül történik.

Egy forma szinten két specifikus esemény - benyújtás és visszaállítás. Amikor egy űrlap benyújtanánk, szükség van a Formikra, hogy átvegye és végezze el az ellenőrzéseket, az állapot törlésével. Az importált & lt; forma & gt; A komponens köti össze ezeket az eseményeket a formiknak.

Most elkezdhetjük hozzáadni az első mezőt. Minden szavazást egy névvel kell kísérni, ami azt jelenti, hogy először szükségünk van egy szövegbevitelre.

A & lt; Field & Gt; az összetevő ugyanazt a munkát végzi, mint & lt; forma & gt; az egész formában. Megköti a szükséges eseményeket és kellékeket, például nevet és értéket a mező állapotának megjelenítéséhez.

Adjon hozzá egy mezőt az űrlapba, és csatlakoztassa a címkével. Ezek a munka, mint rendszeres HTML formákban.

 Import {mező} a "Formik" -tól;
& lt; címke htmlfor = "Név" & gt; Név & lt; / Label & Gt;
& Lt; Field AutoComplete = "Név" id = "Név" név = "Név" típus = "szöveg" / & gt;

05. Ellátási logika

Nem kell dolgoznunk bármilyen böngésző eseményekkel, amint azt a onsubmit eseményt kezelünk. De meg kell adnunk a logikát a benyújtás kezelésére. A visszahívást még mindig hívják onsubmit De ahelyett, hogy közvetlenül megkapja az űrlapértékeket. Ezenkívül megkapja a "táskát" - egy olyan objektumot, amely néhány módszert tartalmaz az űrlaphoz való kölcsönhatáshoz, miközben benyújtja.

Mivel ez az adat tipikusan egy kiszolgálóhoz vezetne, ez a funkció is aszinkron. A formiknak különleges kibocsátás A benyújtás elindulása után automatikusan igaz. Az async funkcióval várhatunk, amíg az űrlap elküldi, és visszaállítja a FALSE-t.

Vissza a Votecontainer.js-ben, hozzáadhatunk a benyújtási logikát. Hozza létre a funkciót, és adja át a & lt; formik & gt; összetevő. Emiatt nem fogunk küldeni egy kiszolgálónak, de késleltetett ígéretet használhatunk a hálózati késleltetés szimulálására.

 CONST ONSUBMIT = ASYNC (értékek, táskák) = & gt; {
    várjon az új ígéret (RESELVE = & GT, SETTIMEOUT (RESIDVE, 1000));
    Bag.setsubmitting (FALSE);
    konzol.log ("benyújtott", értékek);
  };
Visszatérés & lt; formik [...] onsubmit = {onsubmit} / & gt;

06. Kijelző állapot

Azt is meg kell mutatnunk, hogy a benyújtási állam az űrlapon belül. A kettős beadvány megakadályozása érdekében letilthatjuk a gombot, amíg az űrlap elküldi. A Formik ezt a Vote.js belső formájába haladja. Ezt kihúzhatjuk és alkalmazhatjuk a gombra.

 Funkció Szavazás ({Issubmitting}) {[...]}
& lt; bemenet letiltva = {Issubmitting} típus = "Küldés" érték = "Szavazás most" / & gt;

07. Név mező hozzáadása

Jelenleg az űrlap beadható anélkül, hogy beírnánk. Mivel ez egy kötelező mező, meg kell lipizálnunk ezt a felhasználónak.

A gyökér & lt; formik & gt; A komponens egy érvényesítési propot is igénybe vehet, amely egy olyan funkció, amely validálást végez, és visszaküldi az objektumot. Minden kulcs-értékpár egy mezőt és egy hibaüzenetet jelent. Ha egy mezőnek nincs értéke ebben az objektumban, akkor érvényesnek tekinthető. Az űrlap csak akkor jelenik meg, ha ez a funkció üres objektumot ad vissza. A funkció érvként kapja meg az űrlapértékeket. A kötelező mező esetében csak ellenőrizni kell az értéket, nem üres karakterlánc.

Vissza a Votecontainer.js belsejében, hozzon létre egy érvényesítési visszahívási funkciót, hogy ellenőrizze ezt az értéket, és csatlakoztassa a Formikhoz.

 CONST validate = értékek = & gt; {
    CONST hibák = {};
    ha (értékek.name ==== "") {
      hibák.name = "Név szükséges";
    }
    visszatérési hibák;
  };
Visszatérés & lt; Formik [...] Validate = {validate} / & gt;

08. A hibák megjelenítése

Ezeket a hibákat ezután a Vote.js-nak adják át. Az inline hibák megjelenítéséhez meg kell egyezniük a hibákat az adott űrlapmezővel.

 Funkció Szavazás ({Issubmitting, Hiba, megérintett}) {[...]}
& lt; div classname = "input-csoport" & gt;
  & lt; címke htmlfor = "Név" & gt; Név & lt; / Label & Gt;
  & lt; div
    osztálynév = {osztálynevek ({
      "Validation-Group": Igaz,
      Hiba: !! hibák.Name & amp; & amp; megérintett.Name
    })}}
  & gt;
    & Lt; Field AutoComplete = "Név" id = "Név" név = "Név" típus = "szöveg" / & gt;
    {!! hibák.Name & amp; & amp; megérintett.Name & amp; & amp; (
      & lt; div osztálynév = "hibaüzenet" & gt; {hibák.name} & lt; / div & gt;
    )}
  & lt; / div & gt;
& lt; / div & gt;

A Formik minden alkalommal frissíti az űrlapot. A sok mezővel rendelkező űrlapot azonnal meg lehet adni az első változás után hibákkal. Ennek elkerülése érdekében csak akkor jelenítjük meg a hibát, ha egy mezőt megérintették ", ami azt jelenti, hogy valamilyen ponton kölcsönhatásba lépett. Amikor egy űrlap benyújtja, a Formik megérinti az összes mezőt, és minden rejtett hibát mutat.

09. Válasz mező hozzáadása

A Név mező teljes, a válaszokhoz költözhetünk. Az eddig használt megközelítés jól működik a rendszeres szövegbevitelekhez, de nem alkalmas több bemenetre, amelyek ugyanazon a mezőnév alá esnek, például egy rádiógombok csoportja.

Bár többszörös is lehet & lt; Field & Gt; Az azonos nevű alkatrészek, meg kell akadályoznunk, amennyire csak lehetséges. Ehelyett a Formik lehetővé teszi, hogy átadjuk az egyéni komponenst az & lt; mező & gt; amely képes kezelni őket.

A & lt; answergroup & gt; A komponensek hasonlóak a szövegbevitelhez. Olyan opciót igényel, amely egy olyan tömb, amely tartalmazza a megjelenítési lehetőségeket. Ezek formázott rádiógombokká alakulnak át, amelyek lehetővé teszik a felhasználók választ. Tartalmazza ezt a komponenst a Vote.js.-ben Használva & lt; Field & Gt; Ez ugyanazokat a kellékeket adja át, mint a név bemenet, valamint bármilyen extrák, ebben az esetben a LEHETŐSÉGEK állandó.

 A válaszcsoport importálása "./answerroup";
& Lt; Field Component = {answergroup} Opciók = {Opciók} Név = "Válasz" / & gt;

Végül szükségünk van arra, hogy válaszoljon a VoteContainer.js érvényesítési funkciójára is. A folyamat ugyanaz, mint a névmezővel.

 ha (értékek.Aswer === "") {
  hibák.Aswer = "Válasz szükséges";

Az érvényesítési és benyújtási logika elvégzésével elkülönítve és a Formik használatával mindent együtt tudunk tartani, hogy minden darab kis és könnyen megérthető legyen.

Ez a tartalom eredetileg megjelent net magazin . Olvassa el többet Webes design cikkek itt .

Olvass tovább:

Hogyan teszteljük a REACH SITES ÉS APPS tesztelését
6 hatalmas webdesign trendek 2020-ra
Master Minimalism in Web Design

Kezelés React Form állapot formájával

Mi a formik?

01. Kezdje el

02. Hozzon létre formik formát

03. Szavazás összetevő létrehozása

04. mezők hozzáadása

05. Ellátási logika

06. Kijelző állapot

07. Név mező hozzáadása

08. A hibák megjelenítése

09. Válasz mező hozzáadása

kézikönyv - Most Popular Articles

Az oroszlán rajzolása

Facebook Adatvédelmi beállítások: Hogyan tartsuk meg profilját Privát

A kép átméretezése a Photoshopban

Hogyan hozhat létre hiteles manga képregényt

Hozzon létre szerves textúrákat tintában

Hogyan festhet egy légköri portré a Photoshopban

Hogyan mozoghat a Daz Studio és a Cinema 4D

Hogyan lehet a WordPress webhely többnyelvű

Kategóriák