Rad s obrascima i elementima obrasca pri razvoju s Reactom može biti složen jer se HTML elementi obrasca ponašaju nešto drugačije u Reactu nego drugi DOM elementi.
Naučite kako raditi s obrascima i elementima obrasca kao što su potvrdni okviri, tekstna područja i jednoredni unos teksta.
Upravljanje poljima za unos u obrascima
U Reactu, upravljanje poljem za unos u obrascu često se postiže stvaranjem stanja i njegovim vezanjem s poljem za unos.
Na primjer:
funkcijaaplikacija() {const [firstName, setFirstName] = React.useState('');
funkcijahandleFirstNameChange(događaj) {
setFirstName( događaj.cilj.vrijednost )
}
povratak (
<oblik>
<vrsta unosa='tekst' rezervirano mjesto='Ime' onInput={handleFirstNameChange} />
</form>
)
}
Gore imamo a ime stanje, an onInput događaj, i a handleChange rukovatelj. The handleChange funkcija se pokreće pri svakom pritisku tipke za ažuriranje ime država.
Ovaj pristup može biti idealan kada radite s jednim poljem unosa, ali stvarate različita stanja i funkcije rukovatelja za svaki ulazni element postale bi se ponavljale pri radu s višestrukim unosom polja.
Kako biste izbjegli pisanje ponavljajućeg i suvišnog koda u takvim situacijama, svakom polju za unos dajte poseban naziv, postavite objekt kao početnu vrijednost stanja vašeg obrasca, a zatim ispunite objekt svojstvima s istim nazivima kao i unos polja.
Na primjer:
funkcijaaplikacija() {konst [formData, setFormData] = React.useState(
{
ime: '',
prezime: ''
}
);
povratak (
<oblik>
<vrsta unosa='tekst' rezervirano mjesto='Ime' ime='ime' />
<vrsta unosa='tekst' rezervirano mjesto='Prezime' ime='prezime' />
</form>
)
}
The obrazacData služit će kao varijabla stanja za upravljanje i ažuriranje svih polja za unos unutar obrasca. Osigurajte da su nazivi svojstava u objektu stanja identični nazivima ulaznih elemenata.
Za ažuriranje stanja s ulaznim podacima dodajte onInput slušatelja događaja na ulazni element, zatim pozovite kreiranu funkciju rukovatelja.
Na primjer:
funkcijaaplikacija() {konst [formData, setFormData] = React.useState(
{
ime: '',
prezime: ''
}
);
funkcijahandleChange(događaj) {
setFormData( (prevState) => {
povratak {
...pretState,
[event.target.name]: događaj.cilj.vrijednost
}
})
}
povratak (
<oblik>
<ulazni
vrsta='tekst'
rezervirano mjesto='Ime'
ime='ime'
onInput={handleChange}
/>
<ulazni
vrsta='tekst'
rezervirano mjesto='Prezime'
ime='prezime'
onInput={handleChange}
/>
</form>
)
}
Gornji blok koda koristio je onInput događaj i funkcija rukovatelja, handleFirstNameChange. Ovaj handleFirstNameChange funkcija će ažurirati svojstva stanja kada se pozove. Vrijednosti svojstava stanja bit će iste kao one njihovih odgovarajućih ulaznih elemenata.
Pretvaranje vaših unosa u kontrolirane komponente
Kada se HTML obrazac pošalje, njegovo zadano ponašanje je prelazak na novu stranicu u pregledniku. Ovo ponašanje je nezgodno u nekim situacijama, na primjer kada to želite potvrditi podatke unesene u obrazac. U većini slučajeva bit će vam prikladnije imati JavaScript funkciju s pristupom informacijama unesenim u obrazac. To se može lako postići u Reactu korištenjem kontroliranih komponenti.
S datotekama index.html, elementi obrasca zadržavaju evidenciju svog stanja i mijenjaju ga kao odgovor na unos korisnika. Uz React, funkcija postavljenog stanja mijenja dinamičko stanje pohranjeno u svojstvu stanja komponente. Možete kombinirati dva stanja tako da stanje React učinite jedinstvenim izvorom istine. Na taj način komponenta koja stvara obrazac kontrolira što se događa kada korisnik unese podatke. Elementi ulaznog obrasca s vrijednostima koje React kontrolira nazivaju se kontroliranim komponentama ili kontroliranim ulazima.
Da biste koristili kontrolirane unose u svojoj React aplikaciji, dodajte proporcionalnu vrijednost svom ulaznom elementu:
funkcijaaplikacija() {konst [formData, setFormData] = React.useState(
{
ime: '',
prezime: ''
}
);
funkcijahandleChange(događaj) {
setFormData( (prevState) => {
povratak {
...pretState,
[event.target.name]: događaj.cilj.vrijednost
}
})
}
povratak (
<oblik>
<ulazni
vrsta='tekst'
rezervirano mjesto='Ime'
ime='ime'
onInput={handleChange}
vrijednost={formData.firstName}
/>
<ulazni
vrsta='tekst'
rezervirano mjesto='Prezime'
ime='prezime'
onInput={handleChange}
vrijednost={formData.lastName}
/>
</form>
)
}
Atributi vrijednosti ulaznih elemenata sada su postavljeni na vrijednost odgovarajućih svojstava stanja. Vrijednost ulaza uvijek je određena stanjem kada se koristi kontrolirana komponenta.
Rukovanje elementom unosa Textarea
The tekstualno područje element je kao i svaki obični ulazni element, ali sadrži višelinijske ulaze. Korisno je pri prosljeđivanju informacija koje zahtijevaju više od jednog retka.
U datoteci index.html, oznaka tekstualnog područja element određuje svoju vrijednost svojom djecom, kao što se vidi u bloku koda u nastavku:
<tekstualno područje>
Bok, kako si?
</textarea>
Uz React, za korištenje tekstualno područje element, možete stvoriti ulazni element s tipom tekstualno područje.
ovako:
funkcijaaplikacija() {povratak (
<oblik>
<vrsta unosa='tekstualno područje' ime='poruka'/>
</form>
)
}
Alternativa korištenju tekstualno područje kao vrsta unosa je koristiti tekstualno područje oznaka elementa umjesto oznake tipa unosa, kao što se vidi dolje:
funkcijaaplikacija() {povratak (
<oblik>
<tekstualno područje
ime='poruka'
vrijednost='Bok, kako si?'
/>
</form>
)
}
The tekstualno područje oznaka ima atribut vrijednosti koji sadrži informacije o korisniku unesene u tekstualno područje element. Zbog toga funkcionira kao zadani React ulazni element.
Rad s Reactovim elementom unosa potvrdnog okvira
Stvari su malo drugačije kada se radi sa potvrdni okvir ulazi. Polje za unos tipa potvrdni okvir nema atribut vrijednosti. Međutim, ima a provjereno atribut. Ovaj provjereno atribut se razlikuje od atributa vrijednosti po tome što zahtijeva booleovu vrijednost da bi se utvrdilo je li okvir označen ili neoznačen.
Na primjer:
funkcijaaplikacija() {povratak (
<oblik>
<vrsta unosa='potvrdni okvir' id='pridruživanje' ime='pridružiti' />
<oznaka htmlZa='pridruživanje'>Želite li se pridružiti našem timu?</label>
</form>
)
}
Element oznake odnosi se na ID ulaznog elementa pomoću htmlZa atribut. Ovaj htmlZa atribut preuzima ID ulaznog elementa—u ovom slučaju, pridruživanje. Kada stvaranje HTML obrasca, the htmlZa atribut predstavlja za atribut.
The potvrdni okvir bolje koristiti kao kontrolirani unos. To možete postići stvaranjem stanja i dodjeljivanjem početne boolean vrijednosti true ili false.
Trebali biste uključiti dva rekvizita potvrdni okvir ulazni element: a provjereno vlasništvo i an onChange događaj s funkcijom rukovatelja koja će odrediti vrijednost stanja pomoću setIsChecked() funkcija.
Na primjer:
funkcijaaplikacija() {konst [isChecked, setIsChecked] = React.useState(lažno);
funkcijahandleChange() {
setIsChecked( (prevState) => !prevState )
}
povratak (
<oblik>
<ulazni
vrsta='potvrdni okvir'
id='pridruživanje'
ime='pridružiti'
checked={isChecked}
onChange={handleChange}
/>
<oznaka htmlZa='pridruživanje'>Želite li se pridružiti našem timu?</label>
</form>
)
}
Ovaj blok koda generira je Provjereno stanje i postavlja početnu vrijednost na lažno. Postavlja vrijednost je Provjereno prema provjereno atribut u ulaznom elementu. The handleChange aktivirat će se i promijeniti vrijednost stanja je Provjereno na svoju suprotnost kad god kliknete na potvrdni okvir.
Element obrasca vjerojatno može sadržavati višestruke elemente unosa različitih vrsta, kao što su potvrdni okviri, tekst itd.
U takvim slučajevima možete s njima postupati na sličan način kao što ste postupali s višestrukim ulaznim elementima iste vrste.
Evo primjera:
funkcijaaplikacija() {neka[formData, setFormData] = React.useState(
{
ime: ''
pridružiti: pravi,
}
);
funkcijahandleChange(događaj) {
konst {name, value, type, checked} = event.target;
setFormData( (prevState) => {
povratak {
...pretState,
[Ime]: tip potvrdni okvir? provjereno: vrijednost
}
})
}
povratak (
<oblik>
<ulazni
vrsta='tekst'
rezervirano mjesto='Ime'
ime='ime'
onInput={handleChange}
vrijednost={formData.firstName}
/>
<ulazni
vrsta='potvrdni okvir'
id='pridruživanje'
ime='pridružiti'
provjereno={formData.join}
onChange={handleChange}
/>
<oznaka htmlZa='pridruživanje'>Želite li se pridružiti našem timu?</label>
</form>
)
}
Imajte na umu da u handleChange funkcija, setFormData koristi ternarni operator za dodjelu vrijednosti provjereno svojstvo u svojstva stanja ako je ciljni tip unosa a potvrdni okvir. Ako nije, dodjeljuje vrijednosti vrijednost atribut.
Sada možete rukovati React obrascima
Ovdje ste naučili kako raditi s obrascima u Reactu koristeći različite elemente unosa obrasca. Također ste naučili kako primijeniti kontrolirane unose na vaše elemente obrasca dodavanjem proporcije vrijednosti ili provjerene proporcije kada radite s potvrdnim okvirima.
Učinkovito rukovanje elementima unosa obrasca React poboljšat će performanse vaše React aplikacije, što će rezultirati boljim sveobuhvatnim korisničkim iskustvom.