Å jobbe med skjemaer og skjemaelementer når man utvikler med React kan være komplekst fordi HTML-skjemaelementer oppfører seg noe annerledes i React enn andre DOM-elementer.
Lær hvordan du arbeider med skjemaer og skjemaelementer som avmerkingsbokser, tekstområder og enkeltlinjeinndata.
Administrere inndatafelt i skjemaer
I React oppnås ofte administrasjon av et inndatafelt i et skjema ved å opprette en tilstand og binde den til inndatafeltet.
For eksempel:
funksjonApp() {const [firstName, setFirstName] = React.useState('');
funksjonhandleFirstNameChange(begivenhet) {
setFirstName( begivenhet.mål.verdi )
}
komme tilbake (
<form>
<input type='tekst' plassholder='Fornavn' onInput={handleFirstNameChange} />
</form>
)
}
Ovenfor har vi en fornavn stat, en onInput arrangement, og en handleEndre handler. De handleEndre funksjonen kjører ved hvert tastetrykk for å oppdatere fornavn stat.
Denne tilnærmingen kan være ideell når du arbeider med ett inndatafelt, men oppretter forskjellige tilstander og behandlerfunksjoner for hvert input-element vil bli repeterende når du arbeider med flere input Enger.
For å unngå å skrive repeterende og overflødig kode i slike situasjoner, gi hvert inndatafelt et distinkt navn, angi et objekt som starttilstandsverdien til skjemaet, og fyll deretter objektet med egenskaper med samme navn som inndata Enger.
For eksempel:
funksjonApp() {konst [formData, setFormData] = React.useState(
{
fornavn: '',
etternavn: ''
}
);
komme tilbake (
<form>
<input type='tekst' plassholder='Fornavn' navn='fornavn' />
<input type='tekst' plassholder='Etternavn' navn='etternavn' />
</form>
)
}
De formData vil fungere som tilstandsvariabel for å administrere og oppdatere alle inndatafelt i skjemaet. Sørg for at navnene på egenskapene i tilstandsobjektet er identiske med navnene til inngangselementene.
For å oppdatere tilstanden med inndataene, legg til en onInput hendelseslytter til input-elementet, og ring deretter den opprettede behandlerfunksjonen.
For eksempel:
funksjonApp() {konst [formData, setFormData] = React.useState(
{
fornavn: '',
etternavn: ''
}
);
funksjonhandleEndre(begivenhet) {
setFormData((prevState) => {
komme tilbake {
...prevState,
[event.target.name]: begivenhet.mål.verdi
}
})
}
komme tilbake (
<form>
<input
type='tekst'
plassholder='Fornavn'
navn='fornavn'
onInput={handleChange}
/>
<input
type='tekst'
plassholder='Etternavn'
navn='etternavn'
onInput={handleChange}
/>
</form>
)
}
Kodeblokken ovenfor brukte en onInput hendelse og en behandlerfunksjon, handleFirstNameChange. Dette handleFirstNameChange funksjonen vil oppdatere tilstandsegenskapene når den kalles. Verdiene til tilstandsegenskapene vil være de samme som for deres tilsvarende inngangselementer.
Konvertering av inngangene dine til kontrollerte komponenter
Når et HTML-skjema sendes inn, er standardoppførselen å navigere til en ny side i nettleseren. Denne oppførselen er upraktisk i noen situasjoner, for eksempel når du vil validere dataene som er lagt inn i et skjema. I de fleste tilfeller vil du finne det mer egnet å ha en JavaScript-funksjon med tilgang til informasjonen som legges inn i skjemaet. Dette kan enkelt oppnås i React ved hjelp av kontrollerte komponenter.
Med index.html-filer beholder skjemaelementer oversikt over tilstanden sin og endrer den som svar på brukerens input. Med React modifiserer set state-funksjonen en dynamisk tilstand som er lagret i komponentens tilstandsegenskap. Du kan kombinere de to tilstandene ved å gjøre React-tilstanden til den eneste kilden til sannhet. På denne måten styrer komponenten som lager et skjema hva som skjer når en bruker legger inn data. Inndataskjemaelementer med verdier som React kontrollerer kalles kontrollerte komponenter eller kontrollerte innganger.
For å bruke kontrollerte innganger i React-applikasjonen din, legg til en verdipropp til inngangselementet ditt:
funksjonApp() {konst [formData, setFormData] = React.useState(
{
fornavn: '',
etternavn: ''
}
);
funksjonhandleEndre(begivenhet) {
setFormData((prevState) => {
komme tilbake {
...prevState,
[event.target.name]: begivenhet.mål.verdi
}
})
}
komme tilbake (
<form>
<input
type='tekst'
plassholder='Fornavn'
navn='fornavn'
onInput={handleChange}
verdi={formData.firstName}
/>
<input
type='tekst'
plassholder='Etternavn'
navn='etternavn'
onInput={handleChange}
verdi={formData.lastName}
/>
</form>
)
}
Verdiattributtene til inngangselementene er nå satt til å være verdien til tilsvarende tilstandsegenskaper. Verdien av inngangen bestemmes alltid av tilstanden ved bruk av en kontrollert komponent.
Håndtering av tekstområdeinndataelementet
De tekstområde element er som et hvilket som helst vanlig inngangselement, men har flerlinjeinnganger. Det er nyttig når du sender informasjon som krever mer enn en enkelt linje.
I en index.html-fil, tekstområde-tag element bestemmer verdien av sine barn, som vist i kodeblokken nedenfor:
<tekstområde>
Hei, hvordan har du det?
</textarea>
Med React, for å bruke tekstområde element, kan du lage et input-element med typen tekstområde.
Som så:
funksjonApp() {komme tilbake (
<form>
<input type='tekstområde' navn='beskjed'/>
</form>
)
}
Et alternativ til å bruke tekstområde som en inngangstype er å bruke tekstområde element-tag i stedet for input type tag, som vist nedenfor:
funksjonApp() {komme tilbake (
<form>
<tekstområde
navn='beskjed'
verdi='Hei, hvordan har du det?'
/>
</form>
)
}
De tekstområde taggen har et verdiattributt som inneholder brukerens informasjon som er lagt inn i tekstområde element. Dette gjør at det fungerer som et standard React-inndataelement.
Arbeide med Reacts avkrysningsboksinngangselement
Ting er litt annerledes når man jobber med avmerkingsboksen innganger. Inndatafeltet for typen avmerkingsboksen har ikke et verdiattributt. Den har imidlertid en krysset av Egenskap. Dette krysset av attributt skiller seg fra et verdiattributt ved å kreve en boolsk verdi for å avgjøre om boksen er merket av eller ikke.
For eksempel:
funksjonApp() {komme tilbake (
<form>
<input type='avmerkingsboksen' id='bli med' navn='bli med' />
<etikett htmlFor='bli med'>Vil du bli med på laget vårt?</label>
</form>
)
}
Etikettelementet refererer til ID-en til inngangselementet ved hjelp av htmlFor Egenskap. Dette htmlFor attributtet tar inn IDen til inngangselementet – i dette tilfellet, bli med. Når lage et HTML-skjema, den htmlFor attributt representerer til Egenskap.
De avmerkingsboksen brukes bedre som en kontrollert inngang. Du kan oppnå dette ved å opprette en tilstand og tilordne den den opprinnelige boolske verdien av sant eller usant.
Du bør inkludere to rekvisitter på avmerkingsboksen inndataelement: a krysset av eiendom og en på Endre hendelse med en behandlerfunksjon som bestemmer statens verdi ved å bruke setIsChecked() funksjon.
For eksempel:
funksjonApp() {konst [isChecked, setIsChecked] = React.useState(falsk);
funksjonhandleEndre() {
setIsChecked((prevState) => !prevState )
}
komme tilbake (
<form>
<input
type='avmerkingsboksen'
id='bli med'
navn='bli med'
checked={isChecked}
onChange={handleChange}
/>
<etikett htmlFor='bli med'>Vil du bli med på laget vårt?</label>
</form>
)
}
Denne kodeblokken genererer en er avkrysset tilstand, og setter startverdien til falsk. Den setter verdien av er avkrysset til krysset av attributt i inngangselementet. De handleEndre funksjon vil utløses og endre tilstandsverdien til er avkrysset til det motsatte når du klikker på avmerkingsboksen.
Et skjemaelement kan sannsynligvis inneholde flere inndataelementer av forskjellige typer, for eksempel avmerkingsbokser, tekst osv.
I slike tilfeller kan du håndtere dem på en lignende måte som du håndterte flere inndataelementer av samme type.
Her er et eksempel:
funksjonApp() {la[formData, setFormData] = React.useState(
{
fornavn: ''
bli med: ekte,
}
);
funksjonhandleEndre(begivenhet) {
konst {navn, verdi, type, sjekket} = event.target;
setFormData((prevState) => {
komme tilbake {
...prevState,
[Navn]: type avkrysningsboks? sjekket: verdi
}
})
}
komme tilbake (
<form>
<input
type='tekst'
plassholder='Fornavn'
navn='fornavn'
onInput={handleChange}
verdi={formData.firstName}
/>
<input
type='avmerkingsboksen'
id='bli med'
navn='bli med'
checked={formData.join}
onChange={handleChange}
/>
<etikett htmlFor='bli med'>Vil du bli med på laget vårt?</label>
</form>
)
}
Merk at i handleEndre funksjon, setFormData bruker en ternær operatør for å tildele verdien av krysset av egenskap til tilstandsegenskapene hvis målinndatatypen er en avmerkingsboksen. Hvis ikke, tildeler den verdiene til verdi Egenskap.
Nå kan du håndtere reaksjonsskjemaer
Du lærte hvordan du jobber med skjemaer i React ved å bruke forskjellige skjemainndataelementer her. Du lærte også hvordan du bruker kontrollerte inndata på skjemaelementene dine ved å legge til en verdiprop eller avkrysset prop når du arbeider med avmerkingsbokser.
Effektiv håndtering av React-skjemainndataelementer vil forbedre ytelsen til React-applikasjonen din, noe som resulterer i en bedre allsidig brukeropplevelse.