Delo z obrazci in elementi obrazca pri razvoju z Reactom je lahko zapleteno, ker se elementi obrazca HTML v Reactu obnašajo nekoliko drugače kot drugi elementi DOM.
Naučite se delati z obrazci in elementi obrazca, kot so potrditvena polja, besedilna polja in enovrstični vnosi besedila.
Upravljanje vnosnih polj v obrazcih
V Reactu je upravljanje vnosnega polja v obrazcu pogosto doseženo z ustvarjanjem stanja in njegovo vezavo na vnosno polje.
Na primer:
funkcijoaplikacija() {const [firstName, setFirstName] = React.useState('');
funkcijohandleFirstNameChange(dogodek) {
setFirstName( dogodek.tarča.vrednost )
}
vrnitev (
<oblika>
<vrsta vnosa='besedilo' placeholder='Ime' onInput={handleFirstNameChange} />
</form>
)
}
Zgoraj imamo a ime država, an onInput dogodek in a handleChange vodja. The handleChange funkcija se zažene ob vsakem pritisku tipke za posodobitev ime država.
Ta pristop je lahko idealen pri delu z enim vnosnim poljem, vendar pri ustvarjanju različnih stanj in funkcije obdelovalca za vsak vhodni element bi se pri delu z več vhodi ponavljale polja.
Da bi se izognili pisanju ponavljajoče se in odvečne kode v takšnih situacijah, dajte vsakemu vnosnemu polju ločeno ime, nastavite predmet kot vrednost začetnega stanja vašega obrazca in nato izpolnite predmet z lastnostmi z enakimi imeni kot vnos polja.
Na primer:
funkcijoaplikacija() {konst [formData, setFormData] = React.useState(
{
ime: '',
priimek: ''
}
);
vrnitev (
<oblika>
<vrsta vnosa='besedilo' placeholder='Ime' ime='ime' />
<vrsta vnosa='besedilo' placeholder='Priimek' ime='priimek' />
</form>
)
}
The formData bo služil kot spremenljivka stanja za upravljanje in posodabljanje vseh vnosnih polj znotraj obrazca. Zagotovite, da so imena lastnosti v objektu stanja enaka imenom vhodnih elementov.
Za posodobitev stanja z vhodnimi podatki dodajte onInput poslušalec dogodkov na vhodni element, nato pokličite ustvarjeno funkcijo obravnave.
Na primer:
funkcijoaplikacija() {konst [formData, setFormData] = React.useState(
{
ime: '',
priimek: ''
}
);
funkcijohandleChange(dogodek) {
setFormData( (prevState) => {
vrnitev {
...prevState,
[event.target.name]: dogodek.tarča.vrednost
}
})
}
vrnitev (
<oblika>
<vnos
vrsta='besedilo'
placeholder='Ime'
ime='ime'
onInput={handleChange}
/>
<vnos
vrsta='besedilo'
placeholder='Priimek'
ime='priimek'
onInput={handleChange}
/>
</form>
)
}
Zgornji kodni blok je uporabil an onInput dogodek in funkcija obravnave, handleFirstNameChange. to handleFirstNameChange funkcija bo ob klicu posodobila lastnosti stanja. Vrednosti lastnosti stanja bodo enake vrednostm njihovih ustreznih vhodnih elementov.
Pretvorba vaših vnosov v nadzorovane komponente
Ko je obrazec HTML oddan, je njegovo privzeto vedenje pomik na novo stran v brskalniku. To vedenje je v nekaterih situacijah neprijetno, na primer, ko želite potrdite podatke, vnesene v obrazec. V večini primerov se vam bo zdelo bolj primerno imeti funkcijo JavaScript z dostopom do podatkov, vnesenih v obrazec. To je mogoče enostavno doseči v Reactu z uporabo nadzorovanih komponent.
Pri datotekah index.html elementi obrazca ohranijo sled svojega stanja in ga spremenijo kot odgovor na uporabnikov vnos. Z Reactom funkcija nastavljenega stanja spremeni dinamično stanje, shranjeno v lastnosti stanja komponente. Obe stanji lahko združite tako, da stanje React postane en sam vir resnice. Na ta način komponenta, ki ustvari obrazec, nadzoruje, kaj se zgodi, ko uporabnik vnese podatke. Elementi vnosnega obrazca z vrednostmi, ki jih nadzoruje React, se imenujejo nadzorovane komponente ali nadzorovani vnosi.
Če želite uporabiti nadzorovane vnose v svoji aplikaciji React, vnosnemu elementu dodajte element vrednosti:
funkcijoaplikacija() {konst [formData, setFormData] = React.useState(
{
ime: '',
priimek: ''
}
);
funkcijohandleChange(dogodek) {
setFormData( (prevState) => {
vrnitev {
...prevState,
[event.target.name]: dogodek.tarča.vrednost
}
})
}
vrnitev (
<oblika>
<vnos
vrsta='besedilo'
placeholder='Ime'
ime='ime'
onInput={handleChange}
vrednost={formData.firstName}
/>
<vnos
vrsta='besedilo'
placeholder='Priimek'
ime='priimek'
onInput={handleChange}
vrednost={formData.lastName}
/>
</form>
)
}
Atributi vrednosti vhodnih elementov so zdaj nastavljeni tako, da so vrednosti ustreznih lastnosti stanja. Vrednost vhoda je vedno določena s stanjem pri uporabi nadzorovane komponente.
Ravnanje z vnosnim elementom Textarea
The textarea element je kot vsak običajni vhodni element, vendar vsebuje večvrstične vnose. Uporaben je pri posredovanju informacij, ki zahtevajo več kot eno vrstico.
V datoteki index.html je oznaka textarea element določa svojo vrednost s svojimi podrejenimi osebami, kot je prikazano v spodnjem bloku kode:
<textarea>
Živjo kako si?
</textarea>
Z React, za uporabo textarea element, lahko ustvarite vhodni element s tipom textarea.
takole:
funkcijoaplikacija() {vrnitev (
<oblika>
<vrsta vnosa='textarea' ime='sporočilo'/>
</form>
)
}
Alternativa uporabi textarea kot vrsto vnosa je uporaba textarea oznaka elementa namesto oznake vrste vnosa, kot je prikazano spodaj:
funkcijoaplikacija() {vrnitev (
<oblika>
<textarea
ime='sporočilo'
vrednost='Živjo kako si?'
/>
</form>
)
}
The textarea ima atribut vrednosti, ki vsebuje podatke uporabnika, vnesene v textarea element. Zaradi tega deluje kot privzeti vhodni element React.
Delo z vnosnim elementom potrditvenega polja React
Stvari so nekoliko drugačne pri delu z potrditveno polje vložki. Vnosno polje vrste potrditveno polje nima atributa vrednosti. Vendar pa ima a preverjeno atribut. to preverjeno atribut se razlikuje od atributa vrednosti po tem, da zahteva logično vrednost za določitev, ali je polje označeno ali nepotrjeno.
Na primer:
funkcijoaplikacija() {vrnitev (
<oblika>
<vrsta vnosa='potrditveno polje' id='pridružitev' ime='pridruži se' />
<oznaka htmlZa='pridružitev'>Se želiš pridružiti naši ekipi?</label>
</form>
)
}
Element label se nanaša na ID vhodnega elementa z uporabo htmlZa atribut. to htmlZa atribut prevzame ID vhodnega elementa – v tem primeru pridružitev. Kdaj ustvarjanje obrazca HTML, the htmlZa atribut predstavlja za atribut.
The potrditveno polje se bolje uporablja kot nadzorovan vnos. To lahko dosežete tako, da ustvarite stanje in mu dodelite začetno logično vrednost true ali false.
Vključiti morate dva rekvizita potrditveno polje vhodni element: a preverjeno premoženje in an onChange dogodek s funkcijo obravnave, ki bo določila vrednost stanja z uporabo setIsChecked() funkcijo.
Na primer:
funkcijoaplikacija() {konst [isChecked, setIsChecked] = React.useState(lažno);
funkcijohandleChange() {
setIsChecked( (prevState) => !prevState )
}
vrnitev (
<oblika>
<vnos
vrsta='potrditveno polje'
id='pridružitev'
ime='pridruži se'
preverjeno={je preverjeno}
onChange={handleChange}
/>
<oznaka htmlZa='pridružitev'>Se želiš pridružiti naši ekipi?</label>
</form>
)
}
Ta kodni blok ustvari je preverjeno stanje in nastavi svojo začetno vrednost na lažno. Določa vrednost je preverjeno do preverjeno atribut v vhodnem elementu. The handleChange funkcija se bo sprožila in spremenila vrednost stanja je preverjeno v svoje nasprotje vsakič, ko kliknete potrditveno polje.
Element obrazca lahko verjetno vsebuje več vnosnih elementov različnih vrst, kot so potrditvena polja, besedilo itd.
V takšnih primerih jih lahko obravnavate na podoben način, kot ste obravnavali več vhodnih elementov iste vrste.
Tukaj je primer:
funkcijoaplikacija() {pustiti[formData, setFormData] = React.useState(
{
ime: ''
pridruži se: prav,
}
);
funkcijohandleChange(dogodek) {
konst {ime, vrednost, tip, preverjeno} = event.target;
setFormData( (prevState) => {
vrnitev {
...prevState,
[ime]: vrsta potrditveno polje? preverjeno: vrednost
}
})
}
vrnitev (
<oblika>
<vnos
vrsta='besedilo'
placeholder='Ime'
ime='ime'
onInput={handleChange}
vrednost={formData.firstName}
/>
<vnos
vrsta='potrditveno polje'
id='pridružitev'
ime='pridruži se'
preverjeno={formData.join}
onChange={handleChange}
/>
<oznaka htmlZa='pridružitev'>Se želiš pridružiti naši ekipi?</label>
</form>
)
}
Upoštevajte, da v handleChange funkcija, setFormData uporablja ternarni operator za dodelitev vrednosti preverjeno lastnosti v lastnosti stanja, če je ciljni vnosni tip a potrditveno polje. Če ne, dodeli vrednosti vrednost atribut.
Zdaj lahko upravljate z obrazci React
Tukaj ste se naučili delati z obrazci v Reactu z uporabo različnih vnosnih elementov obrazca. Naučili ste se tudi, kako uporabiti nadzorovane vnose za elemente obrazca tako, da pri delu s potrditvenimi polji dodate vrednostni rek ali označen rek.
Učinkovito ravnanje z vnosnimi elementi obrazca React bo izboljšalo delovanje vaše aplikacije React, kar bo imelo za posledico boljšo vsestransko uporabniško izkušnjo.
