Lucrul cu formulare și elemente de formular atunci când se dezvoltă cu React poate fi complex, deoarece elementele de formular HTML se comportă oarecum diferit în React față de alte elemente DOM.
Aflați cum să lucrați cu formulare și elemente de formular, cum ar fi casetele de selectare, zonele de text și intrările de text pe o singură linie.
Gestionarea câmpurilor de intrare în formulare
În React, gestionarea unui câmp de intrare într-un formular este adesea realizată prin crearea unei stări și legarea acesteia la câmpul de intrare.
De exemplu:
funcţieApp() {const [firstName, setFirstName] = React.useState('');
funcţiehandleFirstNameChange(eveniment) {
setFirstName( eveniment.ţintă.valoare )
}
întoarcere (
<formă>
<tip de intrare='text' substituent='Nume' onInput={handleFirstNameChange} />
</form>
)
}
Mai sus avem un Nume stat, an
onInput eveniment și a handleChange manipulator. The handleChange funcția rulează la fiecare apăsare de tastă pentru a actualiza Nume stat.Această abordare poate fi ideală atunci când lucrați cu un câmp de intrare, dar creând stări diferite și funcțiile de gestionare pentru fiecare element de intrare ar deveni repetitive atunci când se lucrează cu intrări multiple câmpuri.
Pentru a evita scrierea codului repetitiv și redundant în astfel de situații, dați fiecărui câmp de intrare un nume distinct, setați un obiect ca valoare de stare inițială a formularului, apoi completați obiectul cu proprietăți cu aceleași nume ca și intrarea câmpuri.
De exemplu:
funcţieApp() {const [formData, setFormData] = React.useState(
{
Nume: '',
nume: ''
}
);
întoarcere (
<formă>
<tip de intrare='text' substituent='Nume' nume='Nume' />
<tip de intrare='text' substituent='Nume' nume='nume' />
</form>
)
}
The formData va servi ca variabilă de stare pentru a gestiona și actualiza toate câmpurile de intrare din formular. Asigurați-vă că numele proprietăților din obiectul de stare sunt identice cu numele elementelor de intrare.
Pentru a actualiza starea cu datele de intrare, adăugați un onInput ascultător de evenimente la elementul de intrare, apoi apelați funcția de gestionare creată.
De exemplu:
funcţieApp() {const [formData, setFormData] = React.useState(
{
Nume: '',
nume: ''
}
);
funcţiehandleChange(eveniment) {
setFormData((prevState) => {
întoarcere {
...prevState,
[nume.țintă.eveniment]: eveniment.ţintă.valoare
}
})
}
întoarcere (
<formă>
<intrare
tip='text'
substituent='Nume'
nume='Nume'
onInput={handleChange}
/>
<intrare
tip='text'
substituent='Nume'
nume='nume'
onInput={handleChange}
/>
</form>
)
}
Blocul de cod de mai sus a folosit un onInput eveniment și o funcție de gestionare, handleFirstNameChange. Acest handleFirstNameChange funcția va actualiza proprietățile stării atunci când este apelată. Valorile proprietăților de stare vor fi aceleași cu cele ale elementelor lor de intrare corespunzătoare.
Conversia intrărilor dvs. în componente controlate
Când se trimite un formular HTML, comportamentul său implicit este de a naviga la o pagină nouă în browser. Acest comportament este incomod în unele situații, cum ar fi atunci când doriți validarea datelor introduse într-un formular. În cele mai multe cazuri, veți găsi mai potrivit să aveți o funcție JavaScript cu acces la informațiile introduse în formular. Acest lucru poate fi realizat cu ușurință în React folosind componente controlate.
Cu fișierele index.html, elementele de formular păstrează evidența stării lor și o modifică ca răspuns la intrarea unui utilizator. Cu React, funcția de stare setată modifică o stare dinamică stocată în proprietatea de stare a componentei. Puteți combina cele două stări făcând din starea React sursa unică a adevărului. În acest fel, componenta care creează un formular controlează ce se întâmplă atunci când un utilizator introduce date. Elementele de formular de intrare cu valori pe care React le controlează sunt numite componente controlate sau intrări controlate.
Pentru a utiliza intrările controlate în aplicația dvs. React, adăugați o valoare de prop la elementul dvs. de intrare:
funcţieApp() {const [formData, setFormData] = React.useState(
{
Nume: '',
nume: ''
}
);
funcţiehandleChange(eveniment) {
setFormData((prevState) => {
întoarcere {
...prevState,
[nume.țintă.eveniment]: eveniment.ţintă.valoare
}
})
}
întoarcere (
<formă>
<intrare
tip='text'
substituent='Nume'
nume='Nume'
onInput={handleChange}
value={formData.firstName}
/>
<intrare
tip='text'
substituent='Nume'
nume='nume'
onInput={handleChange}
value={formData.lastName}
/>
</form>
)
}
Atributele valorii ale elementelor de intrare sunt acum setate să fie valoarea proprietăților de stare corespunzătoare. Valoarea intrării este întotdeauna determinată de starea când se utilizează o componentă controlată.
Manipularea elementului de intrare Textarea
The zona textului elementul este ca orice element de intrare obișnuit, dar deține intrări cu mai multe linii. Este util atunci când transmiteți informații care necesită mai mult de o singură linie.
Într-un fișier index.html, fișierul eticheta textarea elementul își determină valoarea de către copiii săi, așa cum se vede în blocul de cod de mai jos:
<zona textului>
Salut ce mai faci?
</textarea>
Cu React, pentru a utiliza zona textului element, puteți crea un element de intrare cu tipul zona textului.
Ca astfel:
funcţieApp() {întoarcere (
<formă>
<tip de intrare='zona textului' nume='mesaj'/>
</form>
)
}
O alternativă la utilizare zona textului ca tip de intrare este folosirea zona textului eticheta de element în locul etichetei de tip de intrare, după cum se vede mai jos:
funcţieApp() {întoarcere (
<formă>
<zona textului
nume='mesaj'
valoare='Salut ce mai faci?'
/>
</form>
)
}
The zona textului eticheta are un atribut de valoare care deține informațiile utilizatorului introduse în zona textului element. Acest lucru îl face să funcționeze ca un element de intrare React implicit.
Lucrul cu elementul de intrare casetă de selectare React
Lucrurile sunt puțin diferite când lucrezi cu Caseta de bifat intrări. Câmpul de intrare al tipului Caseta de bifat nu are un atribut de valoare. Cu toate acestea, are o verificat atribut. Acest verificat atributul diferă de un atribut valoare prin necesitatea unei valori booleene pentru a determina dacă caseta este bifată sau debifată.
De exemplu:
funcţieApp() {întoarcere (
<formă>
<tip de intrare='Caseta de bifat' id='alăturarea' nume='a te alatura' />
<etichetă htmlFor='alăturarea'>Vrei să te alături echipei noastre?</label>
</form>
)
}
Elementul de etichetă se referă la ID-ul elementului de intrare folosind htmlPentru atribut. Acest htmlPentru atributul preia ID-ul elementului de intrare - în acest caz, alăturarea. Când crearea unui formular HTML, cel htmlPentru atributul reprezintă pentru atribut.
The Caseta de bifat este mai bine folosit ca intrare controlată. Puteți realiza acest lucru creând o stare și atribuindu-i valoarea booleană inițială adevărată sau falsă.
Ar trebui să includeți două elemente de recuzită pe Caseta de bifat element de intrare: a verificat proprietate și an cu privire la schimbările eveniment cu o funcție de gestionare care va determina valoarea stării folosind setIsChecked() funcţie.
De exemplu:
funcţieApp() {const [isChecked, setIsChecked] = React.useState(fals);
funcţiehandleChange() {
setIsChecked((prevState) => !prevState )
}
întoarcere (
<formă>
<intrare
tip='Caseta de bifat'
id='alăturarea'
nume='a te alatura'
verificat={este verificat}
onChange={handleChange}
/>
<etichetă htmlFor='alăturarea'>Vrei să te alături echipei noastre?</label>
</form>
)
}
Acest bloc de cod generează un este bifat stare și își setează valoarea inițială la fals. Setează valoarea lui este bifat la verificat atribut în elementul de intrare. The handleChange funcția se va declanșa și va schimba valoarea de stare a este bifat la opusul său ori de câte ori dați clic pe caseta de selectare.
Un element de formular poate conține mai multe elemente de intrare de diferite tipuri, cum ar fi casete de selectare, text etc.
În astfel de cazuri, le puteți trata într-un mod similar cu modul în care ați gestionat mai multe elemente de intrare de același tip.
Iată un exemplu:
funcţieApp() {lăsa[formData, setFormData] = React.useState(
{
Nume: ''
a te alatura: Adevărat,
}
);
funcţiehandleChange(eveniment) {
const {nume, valoare, tip, bifat} = event.target;
setFormData((prevState) => {
întoarcere {
...prevState,
[Nume]: tip Caseta de bifat? verificat: valoare
}
})
}
întoarcere (
<formă>
<intrare
tip='text'
substituent='Nume'
nume='Nume'
onInput={handleChange}
value={formData.firstName}
/>
<intrare
tip='Caseta de bifat'
id='alăturarea'
nume='a te alatura'
checked={formData.join}
onChange={handleChange}
/>
<etichetă htmlFor='alăturarea'>Vrei să te alături echipei noastre?</label>
</form>
)
}
Rețineți că în handleChange funcţie, setFormData folosește un operator ternar pentru a atribui valoarea lui verificat proprietate la proprietățile de stare dacă tipul de intrare țintă este a Caseta de bifat. Dacă nu, atribuie valorile valoare atribut.
Acum puteți gestiona formularele React
Ați învățat cum să lucrați cu formulare în React folosind diferite elemente de introducere a formularelor aici. Ați învățat, de asemenea, cum să aplicați intrări controlate elementelor de formular adăugând o valoare de prop sau o prop bifată atunci când lucrați cu casete de selectare.
Gestionarea eficientă a elementelor de introducere a formularului React va îmbunătăți performanța aplicației dvs. React, rezultând o experiență mai bună pentru utilizator.