Lomakkeiden ja lomakeelementtien käsitteleminen Reactilla kehitettäessä voi olla monimutkaista, koska HTML-lomakeelementit käyttäytyvät Reactissa hieman eri tavalla kuin muut DOM-elementit.
Opi käyttämään lomakkeita ja lomakeelementtejä, kuten valintaruutuja, tekstialueita ja yksirivisiä tekstisyötteitä.
Syötekenttien hallinta lomakkeissa
Reactissa lomakkeen syöttökentän hallinta suoritetaan usein luomalla tila ja sitomalla se syöttökenttään.
Esimerkiksi:
toimintoSovellus() {const [etunimi, setFirstName] = React.useState('');
toimintohandleFirstNameChange(tapahtuma) {
asetaFirstName( tapahtuma.kohde.arvo )
}
palata (
<muodossa>
<syöttötyyppi='teksti' paikkamerkki='Etunimi' onInput={handleFirstNameChange} />
</form>
)
}
Yllä meillä on a etunimi osavaltio, an onInput tapahtuma ja a kahvaVaihda käsittelijä. The kahvaVaihda toiminto suoritetaan jokaisella näppäinpainalluksella päivittääkseen etunimi osavaltio.
Tämä lähestymistapa voi olla ihanteellinen käytettäessä yhtä syöttökenttää, mutta luotaessa erilaisia tiloja ja Käsittelijän toiminnot kullekin syöteelementille toistuisivat käytettäessä useita syötteitä kentät.
Välttääksesi toistuvan ja redundantin koodin kirjoittamisen tällaisissa tilanteissa anna jokaiselle syöttökentälle erillinen nimi, aseta objekti lomakkeen alkutilaarvona ja täytä sitten objekti ominaisuuksilla, joilla on samat nimet kuin syötteellä kentät.
Esimerkiksi:
toimintoSovellus() {konst [formData, setFormData] = React.useState(
{
etunimi: '',
sukunimi: ''
}
);
palata (
<muodossa>
<syöttötyyppi='teksti' paikkamerkki='Etunimi' nimi ='etunimi' />
<syöttötyyppi='teksti' paikkamerkki='Sukunimi' nimi ='sukunimi' />
</form>
)
}
The formData toimii tilamuuttujana kaikkien lomakkeen sisällä olevien syöttökenttien hallinnassa ja päivittämisessä. Varmista, että tilaobjektin ominaisuuksien nimet ovat samat kuin syöteelementtien nimet.
Jos haluat päivittää tilan syöttötiedoilla, lisää an onInput tapahtumakuuntelija syöteelementtiin ja kutsu sitten luotu käsittelijätoiminto.
Esimerkiksi:
toimintoSovellus() {konst [formData, setFormData] = React.useState(
{
etunimi: '',
sukunimi: ''
}
);
toimintokahvaVaihda(tapahtuma) {
setFormData( (prevState) => {
palata {
...prevState,
[tapahtuma.kohteen nimi]: tapahtuma.kohde.arvo
}
})
}
palata (
<muodossa>
<syöttö
tyyppi='teksti'
paikkamerkki='Etunimi'
nimi ='etunimi'
onInput={handleChange}
/>
<syöttö
tyyppi='teksti'
paikkamerkki='Sukunimi'
nimi ='sukunimi'
onInput={handleChange}
/>
</form>
)
}
Yllä oleva koodilohko käytti an onInput tapahtuma ja käsittelijätoiminto, handleFirstNameChange. Tämä handleFirstNameChange toiminto päivittää tilaominaisuudet kun sitä kutsutaan. Tilaominaisuuksien arvot ovat samat kuin niitä vastaavien syöteelementtien arvot.
Muunna syötteet ohjatuiksi komponenteiksi
Kun HTML-lomake lähetetään, sen oletustoiminto on siirtyä uudelle sivulle selaimessa. Tämä käyttäytyminen on epämukavaa joissakin tilanteissa, kuten silloin, kun haluat vahvistaa lomakkeelle syötetyt tiedot. Useimmissa tapauksissa sinun on sopivampi käyttää JavaScript-toimintoa, jolla pääset käsiksi lomakkeelle syötettyihin tietoihin. Tämä voidaan helposti saavuttaa Reactissa käyttämällä ohjattuja komponentteja.
Index.html-tiedostoissa lomakeelementit säilyttävät tilansa ja muokkaavat sitä käyttäjän syötteen perusteella. Reactilla set state -funktio muokkaa komponentin tila-ominaisuuteen tallennettua dynaamista tilaa. Voit yhdistää nämä kaksi tilaa tekemällä React-tilasta ainoa totuuden lähde. Tällä tavalla lomakkeen luova komponentti hallitsee, mitä tapahtuu, kun käyttäjä syöttää tietoja. Syötemuodon elementtejä, joiden arvot ovat React-säätimiä, kutsutaan ohjatuiksi komponenteiksi tai ohjatuiksi tuloiksi.
Hyödynnä ohjattuja syötteitä React-sovelluksessasi lisäämällä syöttöelementtiin arvoehdotus:
toimintoSovellus() {konst [formData, setFormData] = React.useState(
{
etunimi: '',
sukunimi: ''
}
);
toimintokahvaVaihda(tapahtuma) {
setFormData( (prevState) => {
palata {
...prevState,
[tapahtuma.kohteen nimi]: tapahtuma.kohde.arvo
}
})
}
palata (
<muodossa>
<syöttö
tyyppi='teksti'
paikkamerkki='Etunimi'
nimi ='etunimi'
onInput={handleChange}
value={formData.firstName}
/>
<syöttö
tyyppi='teksti'
paikkamerkki='Sukunimi'
nimi ='sukunimi'
onInput={handleChange}
value={formData.lastName}
/>
</form>
)
}
Syöttöelementtien arvoattribuutit on nyt asetettu vastaavien tilaominaisuuksien arvoiksi. Tulon arvo määräytyy aina tilan mukaan käytettäessä ohjattua komponenttia.
Textarea-syöttöelementin käsittely
The tekstialue elementti on kuin mikä tahansa tavallinen syöttöelementti, mutta sisältää monirivisiä syötteitä. Se on hyödyllinen siirrettäessä tietoa, joka vaatii enemmän kuin yhden rivin.
Index.html-tiedostossa tekstialueen tunniste elementti määrittää arvonsa lapsiensa perusteella, kuten alla olevasta koodilohkosta näkyy:
<tekstialue>
Hei, kuinka voit?
</textarea>
Reactin kanssa voit käyttää tekstialue elementti, voit luoda syöteelementin tyypin kanssa tekstialue.
Niin kuin:
toimintoSovellus() {palata (
<muodossa>
<syöttötyyppi='tekstialue' nimi ='viesti'/>
</form>
)
}
Vaihtoehto käytölle tekstialue syöttötyyppinä on käyttää tekstialue elementtitunniste syöttötyypin tagin tilalle, kuten alla:
toimintoSovellus() {palata (
<muodossa>
<tekstialue
nimi ='viesti'
arvo ='Hei, kuinka voit?'
/>
</form>
)
}
The tekstialue -tunnisteella on arvo-attribuutti, joka sisältää käyttäjän syötetyt tiedot tekstialue elementti. Tämä saa sen toimimaan kuin oletusarvoinen React-syöttöelementti.
Työskentely Reactin valintaruudun syöttöelementin kanssa
Asiat ovat hieman erilaisia, kun työskentelet valintaruutu tulot. Tyypin syöttökenttä valintaruutu ei ole arvo-attribuuttia. Siinä on kuitenkin a tarkistettu attribuutti. Tämä tarkistettu attribuutti eroaa arvoattribuutista siten, että se vaatii loogisen arvon määrittämään, onko ruutu valittu vai ei.
Esimerkiksi:
toimintoSovellus() {palata (
<muodossa>
<syöttötyyppi='valintaruutu' id='liittyminen' nimi ='liittyä seuraan' />
<otsikko htmlFor='liittyminen'>Haluaisitko liittyä joukkoomme?</label>
</form>
)
}
Etikettielementti viittaa syöteelementin tunnukseen käyttämällä htmlFor attribuutti. Tämä htmlFor attribuutti ottaa sisään syöteelementin tunnuksen – tässä tapauksessa liittyminen. Kun HTML-lomakkeen luominen, htmlFor attribuutti edustaa varten attribuutti.
The valintaruutu on parempi käyttää ohjattuna tulona. Voit saavuttaa tämän luomalla tilan ja määrittämällä sille alkuperäisen loogisen arvon tosi tai epätosi.
Sinun tulee sisällyttää siihen kaksi rekvisiittaa valintaruutu syöttöelementti: a tarkistettu omaisuus ja an onChange tapahtuma, jossa on käsittelijätoiminto, joka määrittää tilan arvon käyttämällä setIsChecked() toiminto.
Esimerkiksi:
toimintoSovellus() {konst [isChecked, setIsChecked] = React.useState(väärä);
toimintokahvaVaihda() {
setIsChecked( (prevState) => !prevState )
}
palata (
<muodossa>
<syöttö
tyyppi='valintaruutu'
id='liittyminen'
nimi ='liittyä seuraan'
checked={isChecked}
onChange={handleChange}
/>
<otsikko htmlFor='liittyminen'>Haluaisitko liittyä joukkoomme?</label>
</form>
)
}
Tämä koodilohko luo an on Tarkistettu tila ja asettaa sen alkuarvoksi väärä. Se asettaa arvon on Tarkistettu kohtaan tarkistettu attribuutti syöttöelementissä. The kahvaVaihda toiminto käynnistyy ja muuttaa tilan arvoa on Tarkistettu sen vastakohtaan aina, kun napsautat valintaruutua.
Lomakeelementti voi todennäköisesti sisältää useita erityyppisiä syöttöelementtejä, kuten valintaruutuja, tekstiä jne.
Tällaisissa tapauksissa voit käsitellä niitä samalla tavalla kuin käsittelit useita samantyyppisiä syöttöelementtejä.
Tässä on esimerkki:
toimintoSovellus() {antaa[formData, setFormData] = React.useState(
{
etunimi: ''
liittyä seuraan: totta,
}
);
toimintokahvaVaihda(tapahtuma) {
konst {nimi, arvo, tyyppi, tarkistettu} = tapahtuma.kohde;
setFormData( (prevState) => {
palata {
...prevState,
[nimi]: tyyppi valintaruutu? tarkistettu: arvo
}
})
}
palata (
<muodossa>
<syöttö
tyyppi='teksti'
paikkamerkki='Etunimi'
nimi ='etunimi'
onInput={handleChange}
value={formData.firstName}
/>
<syöttö
tyyppi='valintaruutu'
id='liittyminen'
nimi ='liittyä seuraan'
checked={formData.join}
onChange={handleChange}
/>
<otsikko htmlFor='liittyminen'>Haluaisitko liittyä joukkoomme?</label>
</form>
)
}
Huomaa, että kohdassa kahvaVaihda toiminto, setFormData käyttää kolmiosaista operaattoria arvon määrittämiseen tarkistettu ominaisuus tilan ominaisuuksiin, jos kohdesyöttötyyppi on a valintaruutu. Jos ei, se määrittää arvot arvo attribuutti.
Nyt voit käsitellä reagointilomakkeita
Täällä opit työskentelemään lomakkeiden kanssa Reactissa käyttämällä erilaisia lomakkeiden syöttöelementtejä. Opit myös käyttämään ohjattuja syötteitä lomakeelementteihisi lisäämällä arvopropanaatti tai valittu ehdotus, kun käytät valintaruutuja.
React-lomakkeen syöttöelementtien tehokas käsittely parantaa React-sovelluksesi suorituskykyä, mikä johtaa parempaan käyttökokemukseen.
