Darbs ar formām un veidlapas elementiem, izstrādājot ar React, var būt sarežģīts, jo HTML veidlapas elementi programmā React darbojas nedaudz savādāk nekā citi DOM elementi.
Uzziniet, kā strādāt ar formām un veidlapu elementiem, piemēram, izvēles rūtiņām, teksta apgabaliem un vienas rindiņas teksta ievadi.
Ievades lauku pārvaldība veidlapās
Programmā React ievades lauka pārvaldīšana veidlapā bieži tiek veikta, izveidojot stāvokli un piesaistot to ievades laukam.
Piemēram:
funkcijuApp() {const [firstName, setFirstName] = React.useState('');
funkcijuhandFirstNameChange(notikumu) {
setFirstName( notikumu.target.vērtība )
}
atgriezties (
<formā>
<ievades veids='tekstu' vietturis='Vārds' onInput={handleFirstNameChange} />
</form>
)
}
Iepriekš mums ir a vārds valsts, an onInput pasākums un a rokturisMainīt apdarinātājs. The rokturisMainīt funkcija darbojas katrā taustiņsitienā, lai atjauninātu vārds Valsts.
Šī pieeja var būt ideāla, strādājot ar vienu ievades lauku, bet veidojot dažādus stāvokļus un apdarinātāja funkcijas katram ievades elementam varētu atkārtoties, strādājot ar vairākām ievadēm lauki.
Lai šādās situācijās izvairītos no atkārtota un lieka koda rakstīšanas, piešķiriet katram ievades laukam skaidru nosaukumu, iestatiet objektu kā veidlapas sākotnējā stāvokļa vērtību un pēc tam aizpildiet objektu ar rekvizītiem ar tādiem pašiem nosaukumiem kā ievadei lauki.
Piemēram:
funkcijuApp() {konst [formData, setFormData] = React.useState(
{
vārds: '',
uzvārds: ''
}
);
atgriezties (
<formā>
<ievades veids='tekstu' vietturis='Vārds' vārds ='vārds' />
<ievades veids='tekstu' vietturis='Uzvārds' vārds ='uzvārds' />
</form>
)
}
The formData kalpos kā stāvokļa mainīgais, lai pārvaldītu un atjauninātu visus ievades laukus veidlapā. Pārliecinieties, vai stāvokļa objekta rekvizītu nosaukumi ir identiski ievades elementu nosaukumiem.
Lai atjauninātu stāvokli ar ievades datiem, pievienojiet onInput notikumu uztvērējs ievades elementam, pēc tam izsauciet izveidoto apdarinātāja funkciju.
Piemēram:
funkcijuApp() {konst [formData, setFormData] = React.useState(
{
vārds: '',
uzvārds: ''
}
);
funkcijurokturisMainīt(notikumu) {
setFormData( (prevState) => {
atgriezties {
...prevState,
[notikuma.mērķa nosaukums]: notikumu.target.vērtība
}
})
}
atgriezties (
<formā>
<ievade
tips='tekstu'
vietturis='Vārds'
vārds ='vārds'
onInput={handleChange}
/>
<ievade
tips='tekstu'
vietturis='Uzvārds'
vārds ='uzvārds'
onInput={handleChange}
/>
</form>
)
}
Iepriekš minētais koda bloks izmantoja an onInput notikums un apstrādātāja funkcija, handFirstNameChange. Šis handFirstNameChange funkcija atjauninās stāvokļa rekvizītus, kad tas tiks izsaukts. Stāvokļa rekvizītu vērtības būs tādas pašas kā to atbilstošo ievades elementu vērtības.
Ievadītās informācijas pārvēršana kontrolētos komponentos
Kad tiek iesniegta HTML veidlapa, tās noklusējuma darbība ir pārlūkprogrammas pāriešana uz jaunu lapu. Šāda rīcība dažās situācijās ir neērta, piemēram, kad vēlaties apstiprināt veidlapā ievadītos datus. Vairumā gadījumu jums būs piemērotāka JavaScript funkcija ar piekļuvi veidlapā ievadītajai informācijai. To var viegli panākt React, izmantojot kontrolētus komponentus.
Index.html failos veidlapas elementi saglabā savu stāvokli un modificē to, reaģējot uz lietotāja ievadi. Izmantojot React, iestatītā stāvokļa funkcija maina komponenta stāvokļa īpašumā saglabāto dinamisko stāvokli. Varat apvienot abus stāvokļus, padarot React stāvokli par vienu patiesības avotu. Tādā veidā komponents, kas izveido veidlapu, kontrolē to, kas notiek, kad lietotājs ievada datus. Ievades formas elementi ar vērtībām, kas React vadīklas tiek saukti par kontrolētiem komponentiem vai kontrolētiem ievadiem.
Lai savā React lietojumprogrammā izmantotu kontrolētās ievades, ievades elementam pievienojiet vērtības norādi:
funkcijuApp() {konst [formData, setFormData] = React.useState(
{
vārds: '',
uzvārds: ''
}
);
funkcijurokturisMainīt(notikumu) {
setFormData( (prevState) => {
atgriezties {
...prevState,
[notikuma.mērķa nosaukums]: notikumu.target.vērtība
}
})
}
atgriezties (
<formā>
<ievade
tips='tekstu'
vietturis='Vārds'
vārds ='vārds'
onInput={handleChange}
value={formData.firstName}
/>
<ievade
tips='tekstu'
vietturis='Uzvārds'
vārds ='uzvārds'
onInput={handleChange}
value={formData.lastName}
/>
</form>
)
}
Ievades elementu vērtību atribūti tagad ir iestatīti kā atbilstošo stāvokļa rekvizītu vērtība. Izmantojot kontrolēto komponentu, ievades vērtību vienmēr nosaka stāvoklis.
Textarea ievades elementa apstrāde
The teksta apgabals elements ir kā jebkurš parastais ievades elements, bet tajā ir vairāku rindu ievades. Tas ir noderīgi, nododot informāciju, kas prasa vairāk nekā vienu rindiņu.
Failā index.html teksta apgabala tags elements nosaka tā vērtību pēc saviem bērniem, kā redzams tālāk esošajā koda blokā:
<teksta apgabals>
Sveiks kā tev iet?
</textarea>
Izmantojot React, lai izmantotu teksta apgabals elementu, varat izveidot ievades elementu ar veidu teksta apgabals.
Tā kā:
funkcijuApp() {atgriezties (
<formā>
<ievades veids='teksta apgabals' vārds ='ziņa'/>
</form>
)
}
Alternatīva lietošanai teksta apgabals kā ievades veids ir izmantot teksta apgabals elementa tags ievades tipa taga vietā, kā redzams tālāk:
funkcijuApp() {atgriezties (
<formā>
<teksta apgabals
vārds ='ziņa'
vērtība='Sveiks kā tev iet?'
/>
</form>
)
}
The teksta apgabals tagam ir vērtības atribūts, kas satur lietotāja informāciju, kas ievadīta teksta apgabals elements. Tādējādi tas darbojas kā noklusējuma React ievades elements.
Darbs ar React izvēles rūtiņas ievades elementu
Strādājot, lietas ir nedaudz atšķirīgas izvēles rūtiņa ievades. Tipa ievades lauks izvēles rūtiņa nav vērtības atribūta. Tomēr tai ir a pārbaudīts atribūts. Šis pārbaudīts atribūts atšķiras no vērtības atribūta, pieprasot Būla vērtību, lai noteiktu, vai izvēles rūtiņa ir atzīmēta vai nav atzīmēta.
Piemēram:
funkcijuApp() {atgriezties (
<formā>
<ievades veids='izvēles rūtiņa' id='pievienojas' vārds ='pievienoties' />
<etiķete htmlFor='pievienojas'>Vai vēlaties pievienoties mūsu komandai?</label>
</form>
)
}
Etiķetes elements attiecas uz ievades elementa ID, izmantojot htmlPar atribūts. Šis htmlPar atribūts uzņem ievades elementa ID — šajā gadījumā pievienojas. Kad HTML veidlapas izveide, htmlPar atribūts apzīmē priekš atribūts.
The izvēles rūtiņa ir labāk izmantot kā kontrolētu ievadi. To var panākt, izveidojot stāvokli un piešķirot tam sākotnējo Būla vērtību patiess vai nepatiess.
Jums jāiekļauj divi rekvizīti izvēles rūtiņa ievades elements: a pārbaudīts īpašums un an onChange notikums ar apdarinātāja funkciju, kas noteiks stāvokļa vērtību, izmantojot setIsChecked() funkciju.
Piemēram:
funkcijuApp() {konst [isChecked, setIsChecked] = React.useState(viltus);
funkcijurokturisMainīt() {
setIsChecked( (prevState) => !prevState )
}
atgriezties (
<formā>
<ievade
tips='izvēles rūtiņa'
id='pievienojas'
vārds ='pievienoties'
pārbaudīts={isChecked}
onChange={handleChange}
/>
<etiķete htmlFor='pievienojas'>Vai vēlaties pievienoties mūsu komandai?</label>
</form>
)
}
Šis koda bloks ģenerē irPārbaudīts stāvokli un iestata tā sākotnējo vērtību uz viltus. Tas nosaka vērtību irPārbaudīts uz pārbaudīts atribūts ievades elementā. The rokturisMainīt funkcija aktivizēsies un mainīs stāvokļa vērtību irPārbaudīts ikreiz, kad noklikšķināt uz izvēles rūtiņas.
Veidlapas elementā, iespējams, var būt vairāki dažāda veida ievades elementi, piemēram, izvēles rūtiņas, teksts utt.
Šādos gadījumos varat tos apstrādāt līdzīgi tam, kā apstrādājāt vairākus viena veida ievades elementus.
Šeit ir piemērs:
funkcijuApp() {ļaut[formData, setFormData] = React.useState(
{
vārds: ''
pievienoties: taisnība,
}
);
funkcijurokturisMainīt(notikumu) {
konst {nosaukums, vērtība, veids, pārbaudīts} = event.target;
setFormData( (prevState) => {
atgriezties {
...prevState,
[vārds]: veids izvēles rūtiņa? pārbaudīts: vērtība
}
})
}
atgriezties (
<formā>
<ievade
tips='tekstu'
vietturis='Vārds'
vārds ='vārds'
onInput={handleChange}
value={formData.firstName}
/>
<ievade
tips='izvēles rūtiņa'
id='pievienojas'
vārds ='pievienoties'
checked={formData.join}
onChange={handleChange}
/>
<etiķete htmlFor='pievienojas'>Vai vēlaties pievienoties mūsu komandai?</label>
</form>
)
}
Ņemiet vērā, ka sadaļā rokturisMainīt funkcija, setFormData izmanto trīskāršu operatoru, lai piešķirtu vērtību pārbaudīts rekvizītu stāvokļa rekvizītiem, ja mērķa ievades veids ir a izvēles rūtiņa. Ja nē, tas piešķir vērtības vērtību atribūts.
Tagad varat apstrādāt reakcijas veidlapas
Šeit jūs uzzinājāt, kā strādāt ar formām programmā React, izmantojot dažādus veidlapas ievades elementus. Jūs arī uzzinājāt, kā veidlapas elementiem lietot kontrolētas ievades, pievienojot vērtības vai atzīmes, strādājot ar izvēles rūtiņām.
Efektīva React veidlapas ievades elementu apstrāde uzlabos jūsu React lietojumprogrammas veiktspēju, tādējādi nodrošinot labāku visaptverošu lietotāja pieredzi.
