Práca s formulármi a prvkami formulára pri vývoji pomocou Reactu môže byť zložitá, pretože prvky formulára HTML sa v Reacte správajú trochu inak ako ostatné prvky DOM.
Naučte sa pracovať s formulármi a prvkami formulára, ako sú začiarkavacie políčka, textové oblasti a jednoriadkové textové vstupy.
Správa vstupných polí vo formulároch
V Reacte sa správa vstupného poľa vo formulári často vykonáva vytvorením stavu a jeho naviazaním na vstupné pole.
Napríklad:
funkciuApp() {const [firstName, setFirstName] = React.useState('');
funkciuhandleFirstNameChange(udalosť) {
setFirstName( udalosť.cieľ.hodnota )
}
vrátiť (
<formulár>
<typ vstupu ='text' zástupný symbol ='Krstné meno' onInput={handleFirstNameChange} />
</form>
)
}
Vyššie máme a krstné meno štát, an onInput udalosť, a rukoväťZmeniť psovod. The rukoväťZmeniť funkcia sa spustí pri každom stlačení klávesu na aktualizáciu krstné meno štát.
Tento prístup môže byť ideálny pri práci s jedným vstupným poľom, ale vytváraní rôznych stavov a funkcie obsluhy pre každý vstupný prvok by sa pri práci s viacerými vstupmi opakovali poliach.
Aby ste sa vyhli písaniu opakujúceho sa a nadbytočného kódu v takýchto situáciách, dajte každému vstupnému poľu odlišný názov, nastavte objekt ako hodnotu počiatočného stavu vášho formulára a potom vyplňte objekt vlastnosťami s rovnakými názvami ako vstup poliach.
Napríklad:
funkciuApp() {konšt [formData, setFormData] = React.useState(
{
krstné meno: '',
priezvisko: ''
}
);
vrátiť (
<formulár>
<typ vstupu ='text' zástupný symbol ='Krstné meno' meno='krstné meno' />
<typ vstupu ='text' zástupný symbol ='Priezvisko' meno='priezvisko' />
</form>
)
}
The formData bude slúžiť ako stavová premenná na správu a aktualizáciu všetkých vstupných polí vo formulári. Uistite sa, že názvy vlastností v objekte stavu sú identické s názvami vstupných prvkov.
Ak chcete aktualizovať stav pomocou vstupných údajov, pridajte onInput poslucháča udalostí na vstupný prvok, potom zavolajte vytvorenú funkciu obsluhy.
Napríklad:
funkciuApp() {konšt [formData, setFormData] = React.useState(
{
krstné meno: '',
priezvisko: ''
}
);
funkciurukoväťZmeniť(udalosť) {
setFormData( (prevState) => {
vrátiť {
...prevState,
[event.target.name]: udalosť.cieľ.hodnota
}
})
}
vrátiť (
<formulár>
<vstup
typ='text'
zástupný symbol ='Krstné meno'
meno='krstné meno'
onInput={handleChange}
/>
<vstup
typ='text'
zástupný symbol ='Priezvisko'
meno='priezvisko'
onInput={handleChange}
/>
</form>
)
}
Vyššie uvedený blok kódu používa an onInput udalosť a funkcia obsluhy, handleFirstNameChange. Toto handleFirstNameChange funkcia aktualizuje vlastnosti stavu pri volaní. Hodnoty vlastností stavu budú rovnaké ako hodnoty ich zodpovedajúcich vstupných prvkov.
Premena vašich vstupov na riadené komponenty
Keď sa formulár HTML odošle, jeho predvolené správanie je prejsť na novú stránku v prehliadači. Toto správanie je v niektorých situáciách nepohodlné, napríklad keď chcete overiť údaje zadané do formulára. Vo väčšine prípadov vám bude viac vyhovovať funkcia JavaScript s prístupom k informáciám zadaným do formulára. To sa dá v Reacte jednoducho dosiahnuť pomocou kontrolovaných komponentov.
Pri súboroch index.html si prvky formulára uchovávajú prehľad o svojom stave a upravujú ho v reakcii na vstup používateľa. Pomocou funkcie React upravuje funkcia set state dynamický stav uložený vo vlastnosti state komponentu. Môžete kombinovať dva stavy tak, že stav React urobíte jediným zdrojom pravdy. Týmto spôsobom komponent, ktorý vytvára formulár, riadi, čo sa stane, keď používateľ zadá údaje. Prvky vstupného formulára s hodnotami, ktoré riadi React, sa nazývajú riadené komponenty alebo riadené vstupy.
Ak chcete využiť riadené vstupy vo svojej aplikácii React, pridajte do svojho vstupného prvku hodnotu:
funkciuApp() {konšt [formData, setFormData] = React.useState(
{
krstné meno: '',
priezvisko: ''
}
);
funkciurukoväťZmeniť(udalosť) {
setFormData( (prevState) => {
vrátiť {
...prevState,
[event.target.name]: udalosť.cieľ.hodnota
}
})
}
vrátiť (
<formulár>
<vstup
typ='text'
zástupný symbol ='Krstné meno'
meno='krstné meno'
onInput={handleChange}
value={formData.firstName}
/>
<vstup
typ='text'
zástupný symbol ='Priezvisko'
meno='priezvisko'
onInput={handleChange}
value={formData.lastName}
/>
</form>
)
}
Hodnotové atribúty vstupných prvkov sú teraz nastavené na hodnotu zodpovedajúcich vlastností stavu. Hodnota príkonu je vždy určená stavom pri použití riadeného komponentu.
Manipulácia so vstupným prvkom Textarea
The textarea prvok je ako každý bežný vstupný prvok, ale obsahuje viacriadkové vstupy. Je to užitočné pri odovzdávaní informácií, ktoré vyžadujú viac ako jeden riadok.
V súbore index.html je textarea tag element určuje svoju hodnotu svojimi potomkami, ako je vidieť v bloku kódu nižšie:
<textarea>
Ahoj ako sa máš?
</textarea>
Pomocou funkcie React môžete použiť textarea element, môžete vytvoriť vstupný element s typom textarea.
Ako:
funkciuApp() {vrátiť (
<formulár>
<typ vstupu ='textarea' meno='správu'/>
</form>
)
}
Alternatíva k používaniu textarea ako typ vstupu je použiť textarea značka prvku namiesto značky typu vstupu, ako je uvedené nižšie:
funkciuApp() {vrátiť (
<formulár>
<textarea
meno='správu'
hodnota='Ahoj ako sa máš?'
/>
</form>
)
}
The textarea tag má atribút value, ktorý obsahuje informácie o používateľovi zadané do textarea element. Vďaka tomu funguje ako predvolený vstupný prvok React.
Práca so vstupným prvkom začiarkavacieho políčka React
Pri práci sa veci majú trochu inak začiarkavacie políčko vstupy. Vstupné pole typu začiarkavacie políčko nemá atribút value. Má však a skontrolované atribút. Toto skontrolované atribút sa líši od atribútu value tým, že vyžaduje boolovskú hodnotu na určenie, či je políčko začiarknuté alebo nezačiarknuté.
Napríklad:
funkciuApp() {vrátiť (
<formulár>
<typ vstupu ='začiarkavacie políčko' id='spájanie' meno='pripojiť sa' />
<label htmlFor='spájanie'>Chceli by ste sa pridať do nášho tímu?</label>
</form>
)
}
Prvok označenia odkazuje na ID vstupného prvku pomocou htmlPre atribút. Toto htmlPre atribút preberá ID vstupného prvku – v tomto prípade spájanie. Kedy vytvorenie HTML formulára, htmlPre atribút predstavuje pre atribút.
The začiarkavacie políčko je lepšie použiť ako riadený vstup. Môžete to dosiahnuť vytvorením stavu a priradením počiatočnej booleovskej hodnoty true alebo false.
Mali by ste zahrnúť dve rekvizity na začiarkavacie políčko vstupný prvok: a skontrolované majetok a pri zmene udalosť s funkciou obsluhy, ktorá určí hodnotu stavu pomocou setIsChecked() funkciu.
Napríklad:
funkciuApp() {konšt [isChecked, setIsChecked] = React.useState(falošný);
funkciurukoväťZmeniť() {
setIsChecked( (prevState) => !prevState )
}
vrátiť (
<formulár>
<vstup
typ='začiarkavacie políčko'
id='spájanie'
meno='pripojiť sa'
skontrolované={isChecked}
onChange={handleChange}
/>
<label htmlFor='spájanie'>Chceli by ste sa pridať do nášho tímu?</label>
</form>
)
}
Tento blok kódu generuje je skontrolovaný stav a nastaví počiatočnú hodnotu na falošný. Nastavuje hodnotu je skontrolovaný k skontrolované atribút vo vstupnom prvku. The rukoväťZmeniť funkcia sa spustí a zmení hodnotu stavu je skontrolovaný na jeho opak vždy, keď kliknete na začiarkavacie políčko.
Prvok formulára môže pravdepodobne obsahovať viacero vstupných prvkov rôznych typov, ako sú začiarkavacie políčka, text atď.
V takýchto prípadoch s nimi môžete zaobchádzať podobným spôsobom, ako ste narábali s viacerými vstupnými prvkami rovnakého typu.
Tu je príklad:
funkciuApp() {nech[formData, setFormData] = React.useState(
{
krstné meno: ''
pripojiť sa: pravda,
}
);
funkciurukoväťZmeniť(udalosť) {
konšt {meno, hodnota, typ, kontrolovane} = event.target;
setFormData( (prevState) => {
vrátiť {
...prevState,
[názov]: typu začiarkavacie políčko? skontrolované: hodnota
}
})
}
vrátiť (
<formulár>
<vstup
typ='text'
zástupný symbol ='Krstné meno'
meno='krstné meno'
onInput={handleChange}
value={formData.firstName}
/>
<vstup
typ='začiarkavacie políčko'
id='spájanie'
meno='pripojiť sa'
začiarknuté={formData.join}
onChange={handleChange}
/>
<label htmlFor='spájanie'>Chceli by ste sa pridať do nášho tímu?</label>
</form>
)
}
Všimnite si, že v rukoväťZmeniť funkcia, setFormData používa ternárny operátor na priradenie hodnoty skontrolované vlastnosť na vlastnosti stavu, ak cieľový typ vstupu je a začiarkavacie políčko. Ak nie, priradí hodnoty hodnotu atribút.
Teraz môžete zvládnuť formuláre React
Naučili ste sa, ako pracovať s formulármi v Reacte pomocou rôznych vstupných prvkov formulára. Naučili ste sa tiež, ako použiť riadené vstupy na prvky formulára pridaním hodnoty alebo začiarknutého podperu pri práci so zaškrtávacími políčkami.
Efektívna manipulácia so vstupnými prvkami formulára React zlepší výkon vašej aplikácie React, výsledkom čoho bude lepšia všestranná používateľská skúsenosť.
