Reacti arendamisel vormide ja vormielementidega töötamine võib olla keeruline, kuna HTML-vormielemendid käituvad Reactis mõnevõrra teisiti kui teised DOM-i elemendid.
Siit saate teada, kuidas töötada vormide ja vormielementidega, nagu märkeruudud, tekstipiirkonnad ja üherealised tekstisisendid.
Sisestusväljade haldamine vormides
Reactis toimub vormi sisendvälja haldamine sageli oleku loomise ja selle sisestusväljaga sidumise teel.
Näiteks:
funktsiooniRakendus() {const [eesnimi, setFirstName] = React.useState('');
funktsioonikäepideFirstNameChange(sündmus) {
seaFirstName( sündmus.sihtmärk.väärtus )
}
tagasi (
<vormi>
<sisendi tüüp='tekst' kohatäide='Eesnimi' onInput={handleFirstNameChange} />
</form>
)
}
Eespool on meil a eesnimi riik, an onInput sündmus ja a käepideMuuda käitleja. The käepideMuuda funktsioon töötab iga klahvivajutusega, et värskendada eesnimi olek.
Selline lähenemine võib olla ideaalne ühe sisendväljaga töötamisel, kuid erinevate olekute ja iga sisendelemendi töötleja funktsioonid muutuksid mitme sisendiga töötamisel korduvaks väljad.
Korduva ja üleliigse koodi kirjutamise vältimiseks sellistes olukordades andke igale sisestusväljale selge nimi, määrake objekt vormi algoleku väärtusena ja seejärel täitke objekt sisendiga samade nimedega atribuutidega väljad.
Näiteks:
funktsiooniRakendus() {konst [formData, setFormData] = React.useState(
{
eesnimi: '',
perekonnanimi: ''
}
);
tagasi (
<vormi>
<sisendi tüüp='tekst' kohatäide='Eesnimi' nimi ='eesnimi' />
<sisendi tüüp='tekst' kohatäide='Perekonnanimi' nimi ='perekonnanimi' />
</form>
)
}
The formData toimib olekumuutujana, et hallata ja värskendada kõiki vormi sisestusvälju. Veenduge, et olekuobjekti atribuutide nimed oleksid identsed sisendelementide nimedega.
Oleku värskendamiseks sisendandmetega lisage an onInput sündmuste kuulaja sisendelemendi juurde, seejärel kutsuge loodud töötleja funktsioon.
Näiteks:
funktsiooniRakendus() {konst [formData, setFormData] = React.useState(
{
eesnimi: '',
perekonnanimi: ''
}
);
funktsioonikäepideMuuda(sündmus) {
setFormData( (prevState) => {
tagasi {
...prevState,
[sündmus.sihtmärgi nimi]: sündmus.sihtmärk.väärtus
}
})
}
tagasi (
<vormi>
<sisend
tüüp='tekst'
kohatäide='Eesnimi'
nimi ='eesnimi'
onInput={handleChange}
/>
<sisend
tüüp='tekst'
kohatäide='Perekonnanimi'
nimi ='perekonnanimi'
onInput={handleChange}
/>
</form>
)
}
Ülaltoodud koodiplokk kasutas an onInput sündmus ja käitleja funktsioon, käepideFirstNameChange. See käepideFirstNameChange funktsioon värskendab kutsumisel oleku atribuute. Olekuomaduste väärtused on samad, mis neile vastavatel sisendelementidel.
Teie sisendite teisendamine kontrollitavateks komponentideks
Kui HTML-vorm esitatakse, on selle vaikekäitumine brauseris uuele lehele navigeerimine. Selline käitumine on mõnes olukorras ebamugav, näiteks siis, kui soovite kinnitada vormi sisestatud andmed. Enamasti on teile sobivam JavaScripti funktsioon, millel on juurdepääs vormi sisestatud teabele. Seda on Reactis hõlpsasti saavutatav kontrollitud komponentide abil.
Failide index.html puhul säilitavad vormielemendid oma olekut ja muudavad seda vastavalt kasutaja sisendile. Funktsiooniga React muudab seatud oleku funktsioon komponendi olekuomadusse salvestatud dünaamilist olekut. Saate need kaks olekut ühendada, muutes React-oleku tõe allikaks. Nii juhib vormi loov komponent seda, mis juhtub, kui kasutaja andmeid sisestab. Sisendvormi elemente väärtustega, mida React juhtelemendid nimetatakse kontrollitud komponentideks või juhitud sisenditeks.
Rakenduses React juhitud sisendite kasutamiseks lisage oma sisendelemendile väärtuse tugi:
funktsiooniRakendus() {konst [formData, setFormData] = React.useState(
{
eesnimi: '',
perekonnanimi: ''
}
);
funktsioonikäepideMuuda(sündmus) {
setFormData( (prevState) => {
tagasi {
...prevState,
[sündmus.sihtmärgi nimi]: sündmus.sihtmärk.väärtus
}
})
}
tagasi (
<vormi>
<sisend
tüüp='tekst'
kohatäide='Eesnimi'
nimi ='eesnimi'
onInput={handleChange}
value={formData.firstName}
/>
<sisend
tüüp='tekst'
kohatäide='Perekonnanimi'
nimi ='perekonnanimi'
onInput={handleChange}
value={formData.lastName}
/>
</form>
)
}
Sisendelementide väärtusatribuudid on nüüd seatud vastavate olekuomaduste väärtusteks. Sisendi väärtuse määrab juhitava komponendi kasutamisel alati olek.
Textarea sisendelemendi käsitlemine
The tekstiala element on nagu iga tavaline sisendelement, kuid sisaldab mitmerealisi sisendeid. See on kasulik teabe edastamisel, mis nõuab rohkem kui ühte rida.
Failis index.html on tekstiala silt element määrab selle väärtuse selle laste järgi, nagu on näha allolevast koodiplokist:
<tekstiala>
Tere kuidas sul läheb?
</textarea>
Reacti abil saate kasutada tekstiala element, saate luua sisendelemendi tüübiga tekstiala.
Nagu nii:
funktsiooniRakendus() {tagasi (
<vormi>
<sisendi tüüp='tekstiala' nimi ='sõnum'/>
</form>
)
}
Alternatiiv kasutamisele tekstiala sisenditüübina on kasutada tekstiala elemendi märgend sisendtüübi sildi asemel, nagu allpool näha:
funktsiooniRakendus() {tagasi (
<vormi>
<tekstiala
nimi ='sõnum'
väärtus='Tere kuidas sul läheb?'
/>
</form>
)
}
The tekstiala märgendil on atribuut väärtus, mis sisaldab lahtrisse sisestatud kasutaja teavet tekstiala element. See muudab selle toimima vaikimisi Reacti sisendelemendina.
Reacti märkeruudu sisendelemendiga töötamine
Sellega töötades on asjad veidi erinevad märkeruut sisendid. Tüübi sisestusväli märkeruut ei oma väärtuse atribuuti. Sellel on aga a kontrollitud atribuut. See kontrollitud atribuut erineb väärtuse atribuudist selle poolest, et see nõuab tõeväärtust, et määrata, kas ruut on märgitud või märkimata.
Näiteks:
funktsiooniRakendus() {tagasi (
<vormi>
<sisendi tüüp='märkeruut' id='liitumine' nimi ='liituda' />
<silt htmlFor='liitumine'>Kas sulle meeldib meie meeskonnaga liituda?</label>
</form>
)
}
Sildi element viitab sisendelemendi ID-le, kasutades htmlFor atribuut. See htmlFor atribuut võtab sisse sisendelemendi ID - antud juhul liitumine. Millal HTML-vormi loomine, htmlFor atribuut tähistab jaoks atribuut.
The märkeruut on parem kasutada juhitava sisendina. Seda saate saavutada, luues oleku ja määrates sellele algse tõeväärtuse tõene või väär.
Peaksite lisama kaks rekvisiiti märkeruut sisendelement: a kontrollitud vara ja an onChange sündmus käitleja funktsiooniga, mis määrab oleku väärtuse kasutades setIsChecked() funktsiooni.
Näiteks:
funktsiooniRakendus() {konst [isChecked, setIsChecked] = React.useState(vale);
funktsioonikäepideMuuda() {
setIsChecked( (prevState) => !prevState )
}
tagasi (
<vormi>
<sisend
tüüp='märkeruut'
id='liitumine'
nimi ='liituda'
checked={isChecked}
onChange={handleChange}
/>
<silt htmlFor='liitumine'>Kas sulle meeldib meie meeskonnaga liituda?</label>
</form>
)
}
See koodiplokk genereerib an on Kontrollitud olek ja määrab selle algväärtuseks vale. See määrab väärtuse on Kontrollitud juurde kontrollitud atribuut sisendelemendis. The käepideMuuda funktsioon käivitub ja muudab oleku väärtust on Kontrollitud selle vastandile, kui klõpsate märkeruudul.
Vormielement võib tõenäoliselt sisaldada mitut erinevat tüüpi sisendelementi, nagu märkeruudud, tekst jne.
Sellistel juhtudel saate neid käsitleda sarnaselt sellega, kuidas käsitlesite mitut sama tüüpi sisendelementi.
Siin on näide:
funktsiooniRakendus() {lase[formData, setFormData] = React.useState(
{
eesnimi: ''
liitu: tõsi,
}
);
funktsioonikäepideMuuda(sündmus) {
konst {nimi, väärtus, tüüp, kontrollitud} = event.target;
setFormData( (prevState) => {
tagasi {
...prevState,
[nimi]: tüüp märkeruut? kontrollitud: väärtus
}
})
}
tagasi (
<vormi>
<sisend
tüüp='tekst'
kohatäide='Eesnimi'
nimi ='eesnimi'
onInput={handleChange}
value={formData.firstName}
/>
<sisend
tüüp='märkeruut'
id='liitumine'
nimi ='liituda'
checked={formData.join}
onChange={handleChange}
/>
<silt htmlFor='liitumine'>Kas sulle meeldib meie meeskonnaga liituda?</label>
</form>
)
}
Pange tähele, et jaotises käepideMuuda funktsioon, setFormData kasutab väärtuse määramiseks kolmekomponentset operaatorit kontrollitud atribuut oleku atribuutidele, kui sihtsisendi tüüp on a märkeruut. Kui ei, siis määrab see väärtused väärtus atribuut.
Nüüd saate reageerimisvorme käsitleda
Siin õppisite, kuidas Reactis vormidega töötada, kasutades erinevaid vormi sisendelemente. Samuti õppisite, kuidas rakendada oma vormielementidele kontrollitud sisendeid, lisades märkeruutudega töötamisel väärtuse või märgistatud rekvisiidi.
Reacti vormi sisendelementide tõhus käsitsemine parandab teie Reacti rakenduse jõudlust, mille tulemuseks on parem igakülgne kasutuskogemus.
