Verwalten Reakt Formzoustand mam Formik

Inhalt

• Wat ass Formik?
• 01. Gitt un
• 02. Formik Form erstellen
• 03. Erstellt Vote Komponent
• 04. Felder derbäi
• 05. Versuergungslogik
• 06. Weist Zoustand
• 07. Nummfeld bäifügen
• 08. Fehler uweisen
• 09. Dobäi Äntwert Feld

Wëllkomm op eisem Guide fir wéi Dir de React Form Staat mam Formik verwalt. Formelementer halen hir Wäerter an hirem eegenen internen Zoustand - am Sträit mam React senger staatlecher Approche. Fir déi zwee zesummen ze schaffen, brauche mir eng méi involvéiert Léisung, wéi zum Beispill kontrolléiert Komponente fir all Feld.

Awer et gi vill méi Aspekter fir eng Form ze kreéieren wéi just Daten ze erfaassen. Mir musse kontrolléieren d'Formatéierung ass richteg, all erfuerderlech Felder sinn agestallt an datt alles erfollegräich geschéckt gouf wann et ofgitt. Dat féiert zu vill komplizéierter Logik déi sech séier kann opbauen. Dëst ass wou Formik kann hëllefen.

Fir méi Ressourcen fir Äert Webdesign ze verbesseren, préift eis Iwwersiicht vu Webdesign Tools a Cloud Storage Optiounen. Vun Ufank un? Wielt de richtege Websäit Builder a kritt Äre Webhosting Service direkt mat eise Roundups.

• Luet d'Quelldateien erof

Wat ass Formik?

Formik ass eng liicht Bibliothéik déi dës Probleemer behandelt. Duerch eng Form mat de geliwwert Komponenten ze verpacken, kréie mir vill vun dësem Verhalen gratis. Alles wat mir brauchen ze liwweren ass de Code fir ze handhaben wat eis Form eenzegaarteg mécht.

Fir eis z'ënnersichen wat Formik ka maachen, wäerte mir eng kleng Ofstëmmungsapplikatioun bauen. De Benotzer kann säin Numm aginn an op eng vun de geliwwert Optiounen ofstëmmen. Wann alles gutt ass, gëtt de Formulaire ofginn awer, wann net, kritt de Benotzer eng Fehlermeldung.

01. Gitt un

Fir unzefänken, öffnen de 'Tutorial' Verzeechnes vun den Tutorial Dateien op der Kommandozeil. Installéiert d'Ofhängegkeeten a start de Server. Dës App ass op Create-React-App gebaut an enthält seng Packagen, zesumme mam Formik selwer an e puer anerer fir beim Styling ze hëllefen.

> npm installéieren> npm starten

Den Entwécklungsserver start an d'Applikatioun mécht dann am Browser op. D'App.js Datei kontrolléiert déi ganz Uwendung déi eise Container Komponent fir d'Form gëtt. Maach op src / App.js an importéiert den VoteContainer> Komponent.

Import VoteContainer vun "./VoteContainer";

Füügt et dann an d'Applikatioun bäi.

Sektioun className = "Vote-Container"> VoteContainer /> / Sektioun>

02. Formik Form erstellen

Formik Formen kënnen op zwou Weeër erstallt ginn. Den matFormik méi héijer Bestellkomponent erméiglecht eis eng existent Komponent ëmzebauen oder de Formik> Komponent mat engem Render-Stütz, deen déiselwecht Funktioun ausféiert, dat ass wat mir wäerte benotzen.

Inside VoteContainer.js erstellen e funktionnelle Komponent deen all Logik fir d'Form hält. Dëst zréck a Formik> Komponent déi eis Form mécht. Gitt e Startwäert fir d'Felder déi mir méi spéit duerch den initialWäerter prop.

importéiert {Formik} vu "formik"; Import Stëmm vun "./Vote"; Funktioun VoteContainer () {zréck Formik initialValues ​​= {{name: "", Äntwert: ""}} render = {props => Vote {... props} />} />

03. Erstellt Vote Komponent

Den Stëmmen> Komponent hält d'Formstruktur. Duerch d'Formik Logik getrennt kënne mir de Formkomponent esou einfach wéi méiglech halen.

Erstellt e Vote Komponent bannent Vote.js dee vun der benotzt Form> Komponent aus Formik. Füügt e Knäppchen derbäi fir de Formular wéi normal ofzeginn

importéiert {Form} vu "formik"; Funktioun Stëmmen () {zréckkommen (Form className = "vote"> Input Type = "submit" value = "Vote now" /> / Form>); }

04. Felder derbäi

Formik hält d'Verännerunge vun all Feld op a liwwert se wann de Formulaire agereecht gëtt. Et mécht dat alles duerch d'Evenementer déi aus der Form an all Feld bannent emittéiert ginn.

Op Formniveau sinn et zwou spezifesch Eventer - ofginn an zréckgesat. Wann e Formulaire ofgitt, brauche mir Formik fir seng Kontrollen z'iwwerhuelen a mat dem Reset Event de Staat ze läschen. Déi importéiert Form> Komponent verbindet dës Eventer mam Formik.

Mir kënnen elo ufänken eist éischt Feld bäizefügen. All Stëmm muss mat engem Numm begleet ginn, dat heescht datt mir als éischt en Textinput brauchen.

Den Feld> Komponent mécht déiselwecht Aarbecht wéi Form> mécht fir déi ganz Form. Et verbindet déi néideg Eventer a Requisiten wéi en Numm a Wäert fir Feldzoustand ze weisen.

Füügt e Feld an d'Form bäi a verbannt et mat engem Label. Dës funktionnéiere wéi se an normale HTML Formen wären.

importéiert {Field} vu "formik"; Label htmlFor = "name"> Numm / Label> Feld autoComplete = "name" id = "name" name = "name" type = "text" />

05. Versuergungslogik

Mir brauchen net mat all Browser-Eventer ze schaffen fir ofzeginn, wéi de onSubmit Event gëtt fir eis gehandhabt. Awer mir brauchen d'Logik fir d'Soumissioun ze behandelen. De Réckruff gëtt nach ëmmer genannt onSubmit awer et kritt amplaz d'Formwäerter direkt. Et kritt och de 'Bag' - en Objet mat e puer Methoden fir mat der Form ze interagéieren wärend en ofgitt.

Well dës Date typesch op e Server ginn, kann dës Funktioun och asynchron sinn. De Formik huet e Spezial isSubmitting prop datt et automatesch richteg ass wann d'Soumissioun ufänkt. Mat enger async Funktioun kënne mir waarden bis de Formulaire ofginn huet a setzt dat op falsch zréck.

Zréck a VoteContainer.js kënne mir eis Soumissiounslogik derbäifügen. Erstellt d'Funktioun a gitt se un de Formik> Komponent. Fir dëst Beispill wäerte mir net op e Server schécken awer mir kënnen e verspéite Versprieche benotze fir d'Netzwierk Latenz ze simuléieren.

const onSubmit = async (Wäerter, Täsch) => {waart nei Verspriechen (léisen => setTimeout (léisen, 1000)); Bag.setSubmitting (falsch); console.log ("Form agereecht", Wäerter); }; Retour Formik [...] onSubmit = {onSubmit} />;

06. Weist Zoustand

Mir mussen och dee Soumissiounsstat bannent der Form affichéieren. Fir eng duebel Soumissioun ze vermeiden, kënne mir de Knäppchen ausschalten wann d'Form ofgitt. Formik passéiert dëst an d'Form bannent Vote.js als Prop. Mir kënnen dëst erauszéien an op de Knäppchen uwenden.

Funktioun Stëmmen ({isSubmitting}) {[...]} Input ausgeschalt = {isSubmitting} Typ = "ofginn" Wäert = "Stëmmt elo" />

07. Nummfeld bäifügen

De Moment kann de Formulaire ofginn ouni datt en Numm aginn ass. Well dëst e gefuerdert Feld ass, solle mir dëst dem Benotzer markéieren.

D'Wuerzel Formik> Komponent hëlt och e validéierte Prop, wat eng Funktioun ass, déi eng Validatioun ausféiert an en Objet zréckbréngt. All Schlësselwäertpuer stellt e Feld an eng Feelermeldung duer. Wann e Feld kee Wäert an dësem Objet huet, gëtt et als gëlteg ugesinn. De Formulaire gëtt nëmme weiderginn wann dës Funktioun en eidelen Objet zréckbréngt. D'Funktioun kritt d'Formwäerter als Argument. Fir e gefuerdert Feld musse mir nëmmen de Wäert kontrolléieren ass net eidel String.

Zréck am VoteContainer.js, erstallt eng validéiert Callback Funktioun fir dëse Wäert ze kontrolléieren an en op Formik ze hänken.

const validéieren = Wäerter => {const Feeler = {}; wann (values.name === "") {error.name = "Numm ass erfuerderlech"; } Feeler zréckginn; }; Retour Formik [...] validéieren = {validéieren} />;

08. Fehler uweisen

Dës Feeler ginn dann op Vote.js als Feeler prop weiderginn. Fir Feeler inline ze weisen, musse mir d'Feeler mat dem besonnesche Formfeld upassen.

Funktioun Stëmmen ({isSubmitting, Feeler, beréiert}) {[...]} div className = "input-group"> label htmlFor = "name"> Name / label> div className = {classNames ({"validation-group": true , Feeler: !! error.name && touched.name})}> Feld autoComplete = "name" id = "name" name = "name" type = "text" /> {!! errors.name && touched.name && (div className = "error-message"> {error.name} / div>)} / div> / div>

Formik wäert d'Form validéieren all Kéier wann et aktualiséiert gëtt. Eng Form mat ville Felder wier direkt mat Feeler iwwerschwemmt no der éischter Ännerung. Fir dëst ze vermeiden, weise mir nëmmen de Feeler wann e Feld 'beréiert' gouf, dat heescht datt et irgendwann interagéiert gouf. Wann e Formulaire ofgitt, beréiert Formik all Felder a weist verstoppte Feeler.

09. Dobäi Äntwert Feld

Mat dem Nummfeld fäerdeg kënne mir op d'Äntwerten réckelen. Déi Approche déi mir bis elo benotzt hunn, funktionnéiert gutt fir regelméisseg Textingänge awer ass net fir verschidde Inputen ugepasst déi ënner dem selwechte Feldnumm falen, sou wéi eng Grupp vu Radioknäppercher.

Wärend mir méi kënnen enthalen Feld> Komponente mam selwechten Numm, solle mir vermeiden eis sou vill wéi méiglech ze widderhuelen. Amplaz léisst Formik eis e personaliséierte Komponent an d'Feld weiderginn, deen se als ee manéiere kann.

Den AnswerGroup> Komponent funktionnéiert ähnlech wéi den Textingang. Et brauch en Optiounsprop, dat ass en Array mat den Optiounen fir ze weisen. Dës ginn a gestaltete Radioknäppchen transforméiert, déi de Benotzer eng Äntwert wielen. Gitt dës Komponent mat an Vote.js. Andeems Dir benotzt Feld> et gëtt déiselwecht Requisiten iwwergaang wéi den Numm Input wéi och all Extras, an dësem Fall den Optiounen konstant.

Import AnswerGroup vun "./AnswerGroup"; Feldkomponent = {AnswerGroup} Optiounen = {OPTIONS} Numm = "Äntwert" />

Schlussendlech musse mir och eng Äntwert an eiser Validatiounsfunktioun an VoteContainer.js erfuerderen. De Prozess do ass dee selwechte wéi mam Nummfeld.

wann (values.answer === "") {error.answer = "Äntwert ass erfuerderlech";

Duerch d'Validatiouns- a Soumissiounslogik getrennt ze halen a Formik ze benotze fir alles zesummen ze stiechen, kënne mir all Stéck kleng halen an einfach ze verstoen.

Dësen Inhalt erschéngt ursprénglech am Netz Magazin. Liest méi vun eisem Webdesign Artikelen hei.