At arbejde med formularer og formularelementer ved udvikling med React kan være komplekst, fordi HTML-formularelementer opfører sig noget anderledes i React end andre DOM-elementer.
Lær, hvordan du arbejder med formularer og formularelementer, såsom afkrydsningsfelter, tekstområder og enkeltlinjes tekstinput.
Håndtering af inputfelter i formularer
I React udføres administration af et inputfelt i en form ofte ved at oprette en tilstand og binde den til inputfeltet.
For eksempel:
fungereApp() {const [firstName, setFirstName] = React.useState('');
fungerehandleFirstNameChange(begivenhed) {
sætFornavn( begivenhed.mål.værdi )
}
Vend tilbage (
<form>
<input type='tekst' pladsholder='Fornavn' onInput={handleFirstNameChange} />
</form>
)
}
Ovenfor har vi en fornavn stat, en onInput begivenhed, og en håndtag Skift handler. Det håndtag Skift funktionen kører ved hvert tastetryk for at opdatere fornavn stat.
Denne tilgang kan være ideel, når du arbejder med ét inputfelt, men skaber forskellige tilstande og handlerfunktioner for hvert inputelement ville blive gentagne, når der arbejdes med flere input felter.
For at undgå at skrive gentagen og redundant kode i sådanne situationer, giv hvert inputfelt et særskilt navn, sæt et objekt som starttilstandsværdien for din formular, og udfyld derefter objektet med egenskaber med de samme navne som inputtet felter.
For eksempel:
fungereApp() {konst [formData, setFormData] = React.useState(
{
fornavn: '',
efternavn: ''
}
);
Vend tilbage (
<form>
<input type='tekst' pladsholder='Fornavn' navn='fornavn' />
<input type='tekst' pladsholder='Efternavn' navn='efternavn' />
</form>
)
}
Det formData vil fungere som tilstandsvariabel til at administrere og opdatere alle inputfelter i formularen. Sørg for, at navnene på egenskaberne i tilstandsobjektet er identiske med inputelementernes navne.
For at opdatere tilstanden med inputdataene skal du tilføje en onInput hændelseslytter til input-elementet, og kald derefter din oprettede handlerfunktion.
For eksempel:
fungereApp() {konst [formData, setFormData] = React.useState(
{
fornavn: '',
efternavn: ''
}
);
fungerehåndtag Skift(begivenhed) {
setFormData((prevState) => {
Vend tilbage {
...prevState,
[event.target.name]: begivenhed.mål.værdi
}
})
}
Vend tilbage (
<form>
<input
type='tekst'
pladsholder='Fornavn'
navn='fornavn'
onInput={handleChange}
/>
<input
type='tekst'
pladsholder='Efternavn'
navn='efternavn'
onInput={handleChange}
/>
</form>
)
}
Kodeblokken ovenfor brugte en onInput hændelse og en handlerfunktion, handleFirstNameChange. Det her handleFirstNameChange funktionen opdaterer tilstandsegenskaberne, når den kaldes. Værdierne for tilstandsegenskaberne vil være de samme som for deres tilsvarende inputelementer.
Konvertering af dine input til kontrollerede komponenter
Når en HTML-formular indsendes, er dens standardadfærd at navigere til en ny side i browseren. Denne adfærd er ubelejlig i nogle situationer, som når du vil validere de data, der er indtastet i en formular. I de fleste tilfælde vil du finde det mere velegnet at have en JavaScript-funktion med adgang til de oplysninger, der indtastes i formularen. Dette kan nemt opnås i React ved hjælp af kontrollerede komponenter.
Med index.html-filer bevarer formularelementer deres tilstand og ændrer den som svar på en brugers input. Med React ændrer set state-funktionen en dynamisk tilstand, der er gemt i komponentens tilstandsegenskab. Du kan kombinere de to tilstande ved at gøre React-tilstanden til den eneste kilde til sandhed. På denne måde styrer den komponent, der opretter en formular, hvad der sker, når en bruger indtaster data. Input formularelementer med værdier, som React kontrollerer, kaldes kontrollerede komponenter eller kontrollerede input.
For at gøre brug af kontrollerede input i din React-applikation skal du tilføje en værdiprop til dit inputelement:
fungereApp() {konst [formData, setFormData] = React.useState(
{
fornavn: '',
efternavn: ''
}
);
fungerehåndtag Skift(begivenhed) {
setFormData((prevState) => {
Vend tilbage {
...prevState,
[event.target.name]: begivenhed.mål.værdi
}
})
}
Vend tilbage (
<form>
<input
type='tekst'
pladsholder='Fornavn'
navn='fornavn'
onInput={handleChange}
værdi={formData.firstName}
/>
<input
type='tekst'
pladsholder='Efternavn'
navn='efternavn'
onInput={handleChange}
værdi={formData.lastName}
/>
</form>
)
}
Værdiattributterne for inputelementerne er nu indstillet til at være værdien af tilsvarende tilstandsegenskaber. Værdien af input er altid bestemt af tilstanden ved brug af en kontrolleret komponent.
Håndtering af Textarea Input Element
Det tekstområde element er som ethvert almindeligt input-element, men har multi-line input. Det er nyttigt, når du sender information, der kræver mere end en enkelt linje.
I en index.html-fil er tekstområde tag element bestemmer sin værdi af sine børn, som det ses i kodeblokken nedenfor:
<tekstområde>
Hej, hvordan går det?
</textarea>
Med React, for at bruge tekstområde element, kan du oprette et inputelement med typen tekstområde.
Ligesom:
fungereApp() {Vend tilbage (
<form>
<input type='tekstområde' navn='besked'/>
</form>
)
}
Et alternativ til at bruge tekstområde som inputtype er at bruge tekstområde element tag i stedet for input type tag, som vist nedenfor:
fungereApp() {Vend tilbage (
<form>
<tekstområde
navn='besked'
værdi='Hej, hvordan går det?'
/>
</form>
)
}
Det tekstområde tag har en værdiattribut, der indeholder brugerens oplysninger indtastet i tekstområde element. Dette får det til at fungere som et standard React input-element.
Arbejder med Reacts afkrydsningsfeltinputelement
Tingene er lidt anderledes, når man arbejder med afkrydsningsfeltet input. Indtastningsfeltet for typen afkrydsningsfeltet har ikke en værdi-attribut. Den har dog en kontrolleret attribut. Det her kontrolleret attribut adskiller sig fra en værdiattribut ved at kræve en boolesk værdi for at bestemme, om feltet er markeret eller ikke.
For eksempel:
fungereApp() {Vend tilbage (
<form>
<input type='afkrydsningsfeltet' id='tilslutte sig' navn='tilslutte' />
<etiket htmlFor='tilslutte sig'>Vil du være med på vores hold?</label>
</form>
)
}
Etiketelementet henviser til id'et for inputelementet ved hjælp af html For attribut. Det her html For attribut indtager ID'et for inputelementet - i dette tilfælde, tilslutte sig. Hvornår oprettelse af en HTML-formular, det html For attribut repræsenterer til attribut.
Det afkrydsningsfeltet bruges bedre som et kontrolleret input. Du kan opnå dette ved at oprette en tilstand og tildele den den oprindelige booleske værdi sand eller falsk.
Du bør inkludere to rekvisitter på afkrydsningsfeltet inputelement: a kontrolleret ejendom og en på Skift hændelse med en handlerfunktion, der bestemmer statens værdi ved hjælp af setIsChecked() fungere.
For eksempel:
fungereApp() {konst [isChecked, setIsChecked] = React.useState(falsk);
fungerehåndtag Skift() {
setIsChecked((prevState) => !prevState)
}
Vend tilbage (
<form>
<input
type='afkrydsningsfeltet'
id='tilslutte sig'
navn='tilslutte'
checked={isChecked}
onChange={handleChange}
/>
<etiket htmlFor='tilslutte sig'>Vil du være med på vores hold?</label>
</form>
)
}
Denne kodeblok genererer en er tjekket tilstand og indstiller dens begyndelsesværdi til falsk. Det sætter værdien af er tjekket til kontrolleret attribut i input-elementet. Det håndtag Skift funktion vil udløse og ændre tilstandsværdien af er tjekket til det modsatte, når du klikker på afkrydsningsfeltet.
Et formularelement kan sandsynligvis indeholde flere inputelementer af forskellige typer, såsom afkrydsningsfelter, tekst osv.
I sådanne tilfælde kan du håndtere dem på samme måde som, hvordan du håndterede flere input-elementer af samme type.
Her er et eksempel:
fungereApp() {lade[formData, setFormData] = React.useState(
{
fornavn: ''
tilslutte: rigtigt,
}
);
fungerehåndtag Skift(begivenhed) {
konst {navn, værdi, type, kontrolleret} = begivenhed.mål;
setFormData((prevState) => {
Vend tilbage {
...prevState,
[navn]: type afkrydsningsfelt? kontrolleret: værdi
}
})
}
Vend tilbage (
<form>
<input
type='tekst'
pladsholder='Fornavn'
navn='fornavn'
onInput={handleChange}
værdi={formData.firstName}
/>
<input
type='afkrydsningsfeltet'
id='tilslutte sig'
navn='tilslutte'
checked={formData.join}
onChange={handleChange}
/>
<etiket htmlFor='tilslutte sig'>Vil du være med på vores hold?</label>
</form>
)
}
Bemærk, at i håndtag Skift fungere, sætFormData bruger en ternær operator til at tildele værdien af kontrolleret egenskab til tilstandsegenskaberne, hvis målinputtypen er en afkrydsningsfeltet. Hvis ikke, tildeler den værdierne af værdi attribut.
Nu kan du håndtere reaktionsformularer
Du lærte at arbejde med formularer i React ved hjælp af forskellige formularindtastningselementer her. Du lærte også, hvordan du anvender kontrollerede input til dine formularelementer ved at tilføje en værdiprop eller markeret prop, når du arbejder med afkrydsningsfelter.
Effektiv håndtering af React-formularinputelementer vil forbedre ydeevnen af din React-applikation, hvilket resulterer i en bedre brugeroplevelse overalt.