Reagoi reagoivan muodon tila Formik

Sep 15, 2025

Miten tehdään

(Kuva luotto: Matt Crouch)

Tervetuloa opasamme, miten hallita reagoida lomaketta Formik. Muotoelementit pitävät arvojaan omassa sisäisessä tilassaan - kertoimella reagoivan valtion ajetun lähestymistavan avulla. Jos haluat tehdä kaksi työtä yhdessä, tarvitsemme enemmän mukana olevaa ratkaisua, kuten ohjattujen komponenttien käyttäminen kullekin kentälle.

Mutta on paljon enemmän näkökohtia muodon luomiseksi kuin vain tallentamalla tietoja. Meidän on tarkistettava muotoilu on oikea, kaikki tarvittavat kentät on asetettu ja että kaikki lähetettiin onnistuneesti lähetettäessä. Se johtaa paljon monimutkaisen logiikan, joka voi muodostua nopeasti. Tässä Formik voi auttaa.

Lisää resursseja parantaa web-suunnittelua, tutustumme Web-suunnittelutyökalut ja pilvivarasto vaihtoehtoja. Aloittaa tyhjästä? Valitse oikea Verkkosivuston rakentaja ja saat sivujen ylläpito Palvelu suoraan meidän rounds.

Lataa lähdetiedostot

Mikä on Formik?

Formik on kevyt kirjasto, joka käsittelee näitä ongelmia. Pakkaamalla lomakkeen mukana toimitetuilla komponenteilla, saamme paljon tätä käyttäytymistä ilmaiseksi. Kaikki, mitä meidän on toimittava, on koodi käsitellä, mikä tekee muodoltaan ainutlaatuisen.

Auttaa meitä tutkimaan mitä Formik voi tehdä, rakennamme pienen äänestyssovelluksen. Käyttäjä voi syöttää nimensä ja äänestää johonkin toimitetuista vaihtoehdoista. Jos kaikki on kunnossa, lomake toimitetaan, mutta jos ei, käyttäjä saa virheilmoituksen.

01. Aloita

Avaa "Tutorial" -hakemisto komentorivin opetustiedostoista. Asenna riippuvuudet ja aloita palvelin. Tämä sovellus on rakennettu luotettaessa reagoivaa sovellusta ja sisältää sen paketit sekä Formik itse ja pari muuta auttamaan muotoilua.

 & gt; NPM-asennus
& gt; NPM aloittaa

Kehityspalvelin käynnistyy ja sovellus avautuu selaimeen. App.js-tiedosto ohjaa koko sovellusta, joka tekee konttikomponentin lomakkeelle. Avata SRC / App.JS ja tuoda & lt; votecontainer & gt; komponentti.

 Tuo volcecontainer "./votecontainer";

Lisää se sitten sovellukseen.

 & lt; osio classname = "äänestys kontti" & gt;
  & lt; votecontainer / & gt;
& lt; / osa & gt;

02. Luo Formik-lomake

Formik-lomakkeet voidaan luoda kahdella tavalla. The forformik Korkeamman tilauskomponentti mahdollistaa nykyisen komponentin tai käyttää & lt; formik & gt; Komponentti, jossa on sama tehtävä, joka käyttää samaa toimintoa, jota käytämme.

Sisällä äänesecontainer.js luo funktionaalinen komponentti, joka pitää koko lomakkeen logiikkaa. Tämä palauttaa a & lt; formik & gt; Komponentti, joka tekee lomakkeestamme. Tarjota alan arvo kentille, jota lisäämme myöhemmin InitialValues Prop.

 Tuonti {Formik} alkaen "Formik";
Tuo äänestys "./vote";

Toiminto VoteContainer () {
  Paluu & lt; formik
    InitialValues = {{nimi: "", vastaus: ""}}
render = {rekvisiitta = & gt; & lt; äänestää {... rekvisiitta} / & gt;} / & gt;

03. Luo äänestyskomponentti

The & lt; äänestys & gt; Komponentti pitää lomakkeen rakennetta. Formik-logiikan erillään voimme pitää lomakkeen komponentin mahdollisimman yksinkertaisena.

Luo äänestyskomponentti Inväss.js, joka käyttää & lt; muoto & gt; komponentti Formikista. Lisää painike, jos haluat lähettää lomakkeen normaaliksi.

 Tuonti {lomake} alkaen "Formik";
Toiminto äänestys () {
  Paluu (
    & lt; muodossa Classname = "äänestys" & gt;
      & lt; syöttötyyppi = "Lähetä" arvo = "Äänestys nyt" / & gt;
    & lt; / form & gt;
  );
}

04. Lisää kenttiä

Formik seuraa muutoksia kumpaankin kenttään ja toimittaa ne, kun lomake toimitetaan. Se tekee kaiken tämän tapahtumien kautta muodossa ja kullakin kentällä.

Muototasossa on kaksi erityistä tapahtumaa - Lähetä ja nollaus. Kun lomake väittää, tarvitsemme Formikia ja suorittaa tarkastuksiaan, kun Reset tapahtuma tyhjentää tilan. Tuonti & lt; muoto & gt; Komponentti sitoo nämä tapahtumat Formikiin.

Voimme nyt aloittaa ensimmäisen kentän lisäämisen. Jokaiseen äänestykseen on liitettävä nimi, joka tarkoittaa ensin tekstinsyötön.

The & lt; field & gt; osa tekee samasta työstä kuin & lt; muoto & gt; tekee koko muodossa. Se sitoo tarvittavat tapahtumat ja rekvit, kuten nimi ja arvo kenttätilan näyttämiseksi.

Lisää kenttä lomakkeeseen ja liitä se etikettiin. Nämä toimivat kuin ne säännöllisissä HTML-muodoissa.

 Tuonti {kenttä} alkaen "Formik";
& lt; etiketti htmlfor = "nimi" & gt; nimi & lt; / etiketti & gt;
& lt; kenttä automaattinen täydennys = "nimi" ID = "NAME" NAME = "NAME" tyyppi = "Teksti" / & gt;

05. Toimituslogiikka

Meidän ei tarvitse työskennellä minkä tahansa selaimen tapahtumien kanssa, jotta onsubmit Tapahtuma käsitellään meille. Mutta meidän on toimitettava logiikka käsittelemään lähetystä. Soittopyyntöä kutsutaan edelleen onsubmit Mutta se saa sen sijaan lomakkeen arvot suoraan. Se vastaanottaa myös "laukun" - esine, joka sisältää muutamia menetelmiä vuorovaikutuksessa lomakkeen kanssa, kun se esittää.

Koska nämä tiedot pääsevät tyypillisesti palvelimelle, tämä toiminto voi olla myös asynkroninen. Formikilla on erityinen ennakkoluuloton Prop, että se asettaa totta automaattisesti, kun lähetys alkaa. Async-toiminnolla voimme odottaa, kunnes lomake on lähettänyt ja asettanut sen takaisin FALSE.

Takaisin Sisällä VOTECONTANER.JS, voimme lisätä lähetyslogiemme. Luo toiminto ja siirrä se & lt; formik & gt; komponentti. Tässä esimerkissä emme lähetä palvelimelle, mutta voimme käyttää viivästettyä lupausta simuloida verkon latenssi.

 const onsubmit = async (arvot, laukku) = & gt; {
    Odottaa uutta lupausta (ratkaise = & gt; SetTimeout (ratkaise, 1000));
    Bag.setsubmitting (false);
    konsoli.log ("lomake lähetetty", arvot);
  };
Paluu & lt; formik [...] Onsubmit = {Onsubmit} / & gt ;;

06. Näytä tila

Meidän on myös näytettävä tämä lähetystila lomakkeessa. Kahden lähetyksen estämiseksi voimme poistaa painikkeen käytöstä, kun lomake lähetetään. Formik kulkee tämän lomakkeen sisällä äänestyksessä.js. Voimme vetää tämän ja soveltaa sitä painikkeeseen.

 Toimintaäänestys ({Issubmitting}) {[...]}
& lt; Input poistettu käytöstä = {issubmitting} Tyyppi = "Lähetä" arvo = "Äänestys nyt" / & gt;

07. Lisää nimen kenttä

Tällä hetkellä lomake voidaan lähettää ilman nimeä. Koska tämä on pakollinen kenttä, meidän pitäisi liittää tämä käyttäjälle.

Juuri & lt; formik & gt; Komponentti ottaa myös validointiprofiilin, joka toimii validointi ja palauttaa esineen. Jokainen keskeinen arvopakkaus edustaa kenttää ja virheilmoitus. Jos kentällä ei ole arvoa tässä objektissa, sitä pidetään kelvollisena. Lomake toimittaa vain, kun tämä toiminto palauttaa tyhjän esineen. Toiminto vastaanottaa lomakkeen arvot argumentiksi. Pakollinen kenttä tarvitsemme vain arvon, ei ole tyhjä merkkijono.

Selkä Sisälle VOECONTALINER.JS luo validointipalautustoiminto tarkistaaksesi tämän arvon ja kiinnitä se Formikiin.

 const validoida = arvot = & gt; {
    const virheet = {};
    Jos (arvot.Name === "") {
      virheitä.Name = "Nimi vaaditaan";
    }
    palautusvirheet;
  };
Paluu & lt; formik [...] validoi = {Validate} / & gt ;;

08. Näyttövirheet

Nämä virheet siirretään sitten äänestämään. Jos haluat näyttää virheet, sinun on sovitettava virheet tietyn lomake-kenttään.

 Toimintaäänestys ({Uskominen, virheet, kosketus}) {[...]}
& lt; div classname = "Input-Group" & GT;
  & lt; etiketti htmlfor = "nimi" & gt; nimi & lt; / etiketti & gt;
  & lt; div
    classname = {classnames ({
      "Validation-ryhmä": TRUE,
      Virhe :! virheet.Name & amp; & amp; koskettanut.Name
    })}
  & gt;
    & lt; kenttä automaattinen täydennys = "nimi" ID = "NAME" NAME = "NAME" TYPE = "TEXT" / & GT;
    {!! virheitä.Name & amp; & amp; koskettanut. & amp; & amp; (
      & lt; div classname = "virheilmoitus" & gt; {virheet.Name} & lt; / div & gt;
    )}
  & lt; / div & gt;
& lt; / div & gt;

Formik vahvistaa lomakkeen aina, kun se päivittää. Muoto, jossa on paljon kenttiä, saisit välittömästi virheitä ensimmäisen muutoksen jälkeen. Tämän välttämiseksi näemme vain virheen, kun kenttä on "koskettanut", mikä tarkoittaa, että se on vuorovaikutuksessa jossain vaiheessa. Kun lomake väittää, Formik koskettaa kaikkia kenttiä ja näyttää kaikki piilotetut virheet.

09. Lisää vastauskenttä

Nimi-kenttä on valmis, voimme siirtyä vastauksiin. Lähestymistapa, jota olemme käyttäneet niin pitkälle toimivat hyvin säännöllisiin tekstinsyöttöihin, mutta se ei sovi useisiin panoksiin, jotka kuuluvat saman kentän nimen, kuten Ryhmää radiopainikkeita.

Vaikka voimme sisällyttää useita & lt; field & gt; Saman nimen komponentit, meidän pitäisi välttää toistaa itsemme mahdollisimman paljon. Sen sijaan Formik antaa meille mahdollisuuden siirtää mukautetun komponentin & lt; field & gt; joka voi hallita niitä yhtenä.

The & lt; answergroup & gt; Komponentti toimii samankaltaisina kuin tekstinsyöttö. Se vie vaihtoehtoja, joka on joukko, joka sisältää näytön vaihtoehdot. Nämä muunnetaan muotoiltuksi radiopainikkeiksi, joiden avulla käyttäjät valitsevat vastauksen. Sisällytä tämä komponentti äänestyksessä.js. Käyttämällä & lt; field & gt; Se siirretään samoilla rekvisiittaina kuin nimen syöttö ja kaikki extrat, tässä tapauksessa Vaihtoehdot Vakio.

 Tuo vastausryhmä "./answergroup";
& lt; kenttäkomponentti = {Vastausryhmä} Valinnat = {Options} Nimi = "Vastaus" / & gt;

Lopuksi meidän on vaadittava vastaus validointitoiminnassamme myös äänesecontainer.js. Prosessi on sama kuin Nimi-kenttään.

 Jos (arvot.answer === "") {
  virheet.answer = "Vastaus vaaditaan";

Pidä validointi ja lähettämisen logiikka erillinen ja käyttämällä Formikia ompelemalla kaiken yhdessä, pystymme pitämään jokaisen kappaleen pieninä ja helposti ymmärrettävissä.

Tämä sisältö alun perin ilmestyi Net-aikakauslehti . Lue lisää meidän Web-suunnittelu artikkelit täällä .

Lue lisää:

Miten testata reagoida sivustoja ja sovelluksia
6 valtava web-suunnittelun trendit vuodelle 2020
Master minimalismia web-suunnittelussa

Reagoi reagoivan muodon tila Formik

Mikä on Formik?

01. Aloita

02. Luo Formik-lomake

03. Luo äänestyskomponentti

04. Lisää kenttiä

05. Toimituslogiikka

06. Näytä tila

07. Lisää nimen kenttä

08. Näyttövirheet

09. Lisää vastauskenttä

Miten tehdään - Suosituimmat artikkelit

Kuinka nopeuttaa ja optimoida WordPress-sivustoja

Luo Jumalan säteet V-Ray

5 Asiat, joita tarvitset öljymaalaukseen

Anatomy Masterclass: Täydellinen luvut

Vastaavan Web-typografian säännöt

13 Vinkkejä VR-pelaamisen maailman tekemiseen

Tee typografinen juliste Adobe InDesignilla

Kuinka ottaa Vector-logon 2D-3D: sta

Luokat