Het werken met formulieren en formulierelementen bij het ontwikkelen met React kan complex zijn omdat HTML-formulierelementen zich in React iets anders gedragen dan andere DOM-elementen.
Leer hoe u met formulieren en formulierelementen werkt, zoals selectievakjes, tekstgebieden en tekstinvoer van één regel.
Invoervelden in formulieren beheren
In React wordt het beheer van een invoerveld in een formulier vaak bereikt door een status te creëren en deze aan het invoerveld te binden.
Bijvoorbeeld:
functieapp() {const [firstName, setFirstName] = React.useState('');
functiehandleFirstNameChange(evenement) {
setVoornaam( evenement.doel.waarde )
}
opbrengst (
<formulier>
<invoertype='tekst' tijdelijke aanduiding='Voornaam' onInput={handleFirstNameChange} />
</form>
)
}
Hierboven hebben we een Voornaam staat, een opInput evenement, en een omgaanWijzigen behandelaar. De omgaanWijzigen functie wordt bij elke toetsaanslag uitgevoerd om de Voornaam staat.
Deze benadering kan ideaal zijn bij het werken met één invoerveld, maar het creëren van verschillende statussen en handler-functies voor elk invoerelement zouden repetitief worden bij het werken met meerdere invoer velden.
Om te voorkomen dat u in dergelijke situaties repetitieve en overbodige code schrijft, geeft u elk invoerveld een aparte naam, stelt u een object in als de initiële statuswaarde van uw formulier en vul het object vervolgens met eigenschappen met dezelfde namen als de invoer velden.
Bijvoorbeeld:
functieapp() {const [formData, setFormData] = React.useState(
{
Voornaam: '',
achternaam: ''
}
);
opbrengst (
<formulier>
<invoertype='tekst' tijdelijke aanduiding='Voornaam' naam='Voornaam' />
<invoertype='tekst' tijdelijke aanduiding='Achternaam' naam='achternaam' />
</form>
)
}
De formulierGegevens zal dienen als de statusvariabele om alle invoervelden in het formulier te beheren en bij te werken. Zorg ervoor dat de namen van de eigenschappen in het state-object identiek zijn aan de namen van de invoerelementen.
Voeg een toe om de status bij te werken met de invoergegevens opInput gebeurtenislistener naar het invoerelement en roep vervolgens uw gemaakte handlerfunctie aan.
Bijvoorbeeld:
functieapp() {const [formData, setFormData] = React.useState(
{
Voornaam: '',
achternaam: ''
}
);
functieomgaanWijzigen(evenement) {
setFormData( (prevState) => {
opbrengst {
...vorigeStaat,
[gebeurtenis.doel.naam]: evenement.doel.waarde
}
})
}
opbrengst (
<formulier>
<invoer
type='tekst'
tijdelijke aanduiding='Voornaam'
naam='Voornaam'
onInput={handleChange}
/>
<invoer
type='tekst'
tijdelijke aanduiding='Achternaam'
naam='achternaam'
onInput={handleChange}
/>
</form>
)
}
Het bovenstaande codeblok gebruikte een opInput gebeurtenis en een handlerfunctie, handleFirstNameChange. Dit handleFirstNameChange functie werkt de statuseigenschappen bij wanneer deze wordt aangeroepen. De waarden van de statuseigenschappen zijn dezelfde als die van hun overeenkomstige invoerelementen.
Uw invoer omzetten in gecontroleerde componenten
Wanneer een HTML-formulier wordt verzonden, is het standaardgedrag om naar een nieuwe pagina in de browser te navigeren. Dit gedrag is in sommige situaties ongemakkelijk, bijvoorbeeld wanneer u dat wilt valideer de gegevens die in een formulier zijn ingevoerd. In de meeste gevallen zult u het geschikter vinden om een JavaScript-functie te hebben met toegang tot de informatie die in het formulier is ingevuld. Dit kan eenvoudig worden bereikt in React met behulp van gecontroleerde componenten.
Met index.html-bestanden houden formulierelementen hun status bij en passen ze deze aan als reactie op de invoer van een gebruiker. Met React wijzigt de set state-functie een dynamische status die is opgeslagen in de state-eigenschap van de component. Je kunt de twee toestanden combineren door de React-staat de enige bron van waarheid te maken. Op deze manier bepaalt de component die een formulier maakt wat er gebeurt als een gebruiker gegevens invoert. Invoerformulierelementen met waarden die door React worden bestuurd, worden gecontroleerde componenten of gecontroleerde invoer genoemd.
Om gebruik te maken van gecontroleerde invoer in uw React-toepassing, voegt u een waardeprop toe aan uw invoerelement:
functieapp() {const [formData, setFormData] = React.useState(
{
Voornaam: '',
achternaam: ''
}
);
functieomgaanWijzigen(evenement) {
setFormData( (prevState) => {
opbrengst {
...vorigeStaat,
[gebeurtenis.doel.naam]: evenement.doel.waarde
}
})
}
opbrengst (
<formulier>
<invoer
type='tekst'
tijdelijke aanduiding='Voornaam'
naam='Voornaam'
onInput={handleChange}
waarde={formData.firstName}
/>
<invoer
type='tekst'
tijdelijke aanduiding='Achternaam'
naam='achternaam'
onInput={handleChange}
waarde={formData.lastName}
/>
</form>
)
}
De waardeattributen van de invoerelementen zijn nu ingesteld op de waarde van overeenkomstige statuseigenschappen. De waarde van de input wordt altijd bepaald door de toestand bij gebruik van een gestuurde component.
Omgaan met het Textarea-invoerelement
De tekstgebied element is zoals elk regulier invoerelement, maar bevat meerregelige invoer. Dit is handig bij het doorgeven van informatie die meer dan een enkele regel vereist.
In een index.html-bestand wordt de textarea-tag element bepaalt zijn waarde door zijn kinderen, zoals te zien is in het onderstaande codeblok:
<tekstgebied>
Hallo hoe is het?
</textarea>
Met React, om de tekstgebied element, kunt u een invoerelement maken met het type tekstgebied.
Zoals zo:
functieapp() {opbrengst (
<formulier>
<invoertype='tekstgebied' naam='bericht'/>
</form>
)
}
Een alternatief voor gebruiken tekstgebied als invoertype is om de tekstgebied element-tag in plaats van de invoertype-tag, zoals hieronder te zien is:
functieapp() {opbrengst (
<formulier>
<tekstgebied
naam='bericht'
waarde='Hallo hoe is het?'
/>
</form>
)
}
De tekstgebied tag heeft een waardekenmerk dat de informatie van de gebruiker bevat die is ingevoerd in de tekstgebied element. Hierdoor werkt het als een standaard React-invoerelement.
Werken met React's Checkbox Input Element
Dingen zijn een beetje anders bij het werken met selectievakje ingangen. Het invoerveld van het type selectievakje heeft geen waardekenmerk. Het heeft echter een gecontroleerd attribuut. Dit gecontroleerd kenmerk verschilt van een waardekenmerk door een booleaanse waarde te vereisen om te bepalen of het vakje is aangevinkt of niet.
Bijvoorbeeld:
functieapp() {opbrengst (
<formulier>
<invoertype='selectievakje' identiteitsbewijs='toetreden' naam='meedoen' />
<label htmlFor='toetreden'>Kom jij ons team versterken?</label>
</form>
)
}
Het labelelement verwijst naar de ID van het invoerelement met behulp van de htmlVoor attribuut. Dit htmlVoor attribuut neemt de ID van het invoerelement op, in dit geval toetreden. Wanneer een HTML-formulier maken, de htmlVoor attribuut vertegenwoordigt de voor attribuut.
De selectievakje kan beter worden gebruikt als een gecontroleerde invoer. U kunt dit bereiken door een status te maken en deze de initiële booleaanse waarde waar of onwaar toe te wijzen.
Je moet twee rekwisieten op de selectievakje invoerelement: een gecontroleerd eigendom en een opWijzigen gebeurtenis met een handlerfunctie die de waarde van de status bepaalt met behulp van de setIsChecked() functie.
Bijvoorbeeld:
functieapp() {const [isChecked, setIsChecked] = React.useState(vals);
functieomgaanWijzigen() {
setIsChecked( (prevState) => !vorigeStaat )
}
opbrengst (
<formulier>
<invoer
type='selectievakje'
identiteitsbewijs='toetreden'
naam='meedoen'
aangevinkt={isgecheckt}
onChange={handleChange}
/>
<label htmlFor='toetreden'>Kom jij ons team versterken?</label>
</form>
)
}
Dit codeblok genereert een is nagekeken state en stelt de beginwaarde in op vals. Het bepaalt de waarde van is nagekeken naar de gecontroleerd attribuut in het invoerelement. De omgaanWijzigen functie zal vuren en de statuswaarde van wijzigen is nagekeken naar het tegenovergestelde wanneer u op het selectievakje klikt.
Een formulierelement kan waarschijnlijk meerdere invoerelementen van verschillende typen bevatten, zoals selectievakjes, tekst, enz.
In dergelijke gevallen kunt u ze op dezelfde manier afhandelen als hoe u meerdere invoerelementen van hetzelfde type hebt behandeld.
Hier is een voorbeeld:
functieapp() {laten[formData, setFormData] = React.useState(
{
Voornaam: ''
meedoen: WAAR,
}
);
functieomgaanWijzigen(evenement) {
const {naam, waarde, type, aangevinkt} = gebeurtenis.doel;
setFormData( (prevState) => {
opbrengst {
...vorigeStaat,
[naam]: type selectievakje? aangevinkt: waarde
}
})
}
opbrengst (
<formulier>
<invoer
type='tekst'
tijdelijke aanduiding='Voornaam'
naam='Voornaam'
onInput={handleChange}
waarde={formData.firstName}
/>
<invoer
type='selectievakje'
identiteitsbewijs='toetreden'
naam='meedoen'
aangevinkt={formData.join}
onChange={handleChange}
/>
<label htmlFor='toetreden'>Kom jij ons team versterken?</label>
</form>
)
}
Merk op dat in de omgaanWijzigen functie, setFormData gebruikt een ternaire operator om de waarde van de toe te wijzen gecontroleerd eigenschap toe aan de toestandseigenschappen als het doelinvoertype een selectievakje. Zo niet, dan worden de waarden van de waarde attribuut.
Nu kunt u reageren op formulieren
Je hebt hier geleerd hoe je met formulieren in React kunt werken met behulp van verschillende formulierinvoerelementen. U hebt ook geleerd hoe u gecontroleerde invoer toepast op uw formulierelementen door een waardeprop of aangevinkte prop toe te voegen bij het werken met selectievakjes.
Efficiënte verwerking van React-formulierinvoerelementen zal de prestaties van uw React-applicatie verbeteren, wat resulteert in een betere algehele gebruikerservaring.