Reactieformulieren
Net als in HTML gebruikt React formulieren om gebruikers in staat te stellen te communiceren met de webpagina.
Formulieren toevoegen in React
Je voegt een formulier toe met React zoals elk ander element:
Voorbeeld:
Voeg een formulier toe waarmee gebruikers hun naam kunnen invoeren:
function MyForm() {
return (
<form>
<label>Enter your name:
<input type="text" />
</label>
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Dit werkt normaal, het formulier wordt verzonden en de pagina wordt vernieuwd.
Maar dit is over het algemeen niet wat we willen dat er gebeurt in React.
We willen dit standaardgedrag voorkomen en React het formulier laten beheren.
Formulieren verwerken
Het afhandelen van formulieren gaat over hoe u omgaat met de gegevens wanneer deze van waarde veranderen of worden ingediend.
In HTML worden formuliergegevens meestal verwerkt door de DOM.
In React worden formuliergegevens meestal verwerkt door de componenten.
Wanneer de gegevens door de componenten worden verwerkt, worden alle gegevens opgeslagen in de componentstatus.
U kunt wijzigingen beheren door gebeurtenishandlers toe te voegen aan het
onChangeattribuut.
We kunnen de useStateHook gebruiken om elke invoerwaarde bij te houden en een "enkele bron van waarheid" voor de hele toepassing te bieden.
Zie het gedeelte React Hooks voor meer informatie over Hooks.
Voorbeeld:
Gebruik de onChangehaak om de invoer te beheren:
import { useState } from "react";
import ReactDOM from 'react-dom';
function MyForm() {
const [name, setName] = useState("");
return (
<form>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Gecertificeerd!
$95 INSCHRIJVEN
Formulieren verzenden
U kunt de verzendactie beheren door een gebeurtenishandler toe te voegen aan het onSubmitkenmerk voor de <form>:
Voorbeeld:
Voeg een verzendknop en een gebeurtenishandler toe aan het onSubmitattribuut:
import { useState } from "react";
import ReactDOM from 'react-dom';
function MyForm() {
const [name, setName] = useState("");
const handleSubmit = (event) => {
event.preventDefault();
alert(`The name you entered was: ${name}`)
}
return (
<form onSubmit={handleSubmit}>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<input type="submit" />
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Meerdere invoervelden
U kunt de waarden van meer dan één invoerveld bepalen door
nameaan elk element een attribuut toe te voegen.
We zullen onze status initialiseren met een leeg object.
Gebruik de syntaxis event.target.nameen
om toegang te krijgen tot de velden in de gebeurtenishandler
.event.target.value
Gebruik vierkante haken [haakjesnotatie] rond de eigenschapsnaam om de status bij te werken.
Voorbeeld:
Schrijf een formulier met twee invoervelden:
import { useState } from "react";
import ReactDOM from "react-dom";
function MyForm() {
const [inputs, setInputs] = useState({});
const handleChange = (event) => {
const name = event.target.name;
const value = event.target.value;
setInputs(values => ({...values, [name]: value}))
}
const handleSubmit = (event) => {
event.preventDefault();
alert(inputs);
}
return (
<form onSubmit={handleSubmit}>
<label>Enter your name:
<input
type="text"
name="username"
value={inputs.username || ""}
onChange={handleChange}
/>
</label>
<label>Enter your age:
<input
type="number"
name="age"
value={inputs.age || ""}
onChange={handleChange}
/>
</label>
<input type="submit" />
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Opmerking: we gebruiken dezelfde gebeurtenishandlerfunctie voor beide invoervelden, we zouden voor elk een gebeurtenishandler kunnen schrijven, maar dit geeft ons veel schonere code en is de voorkeursmanier in React.
Tekstgebied
Het textarea-element in React is iets anders dan gewone HTML.
In HTML was de waarde van een tekstgebied de tekst tussen de starttag
<textarea>
en de eindtag </textarea>.
<textarea>
Content of the textarea.
</textarea>In React wordt de waarde van een tekstgebied in een waardeattribuut geplaatst. We gebruiken de useStateHook om de waarde van het tekstgebied te wijzigen:
Voorbeeld:
Een eenvoudig tekstgebied met wat inhoud:
import { useState } from "react";
import ReactDOM from "react-dom";
function MyForm() {
const [textarea, setTextarea] = useState(
"The content of a textarea goes in the value attribute"
);
const handleChange = (event) => {
setTextarea(event.target.value)
}
return (
<form>
<textarea value={textarea} onChange={handleChange} />
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Selecteer
Een vervolgkeuzelijst of een selectievak in React is ook een beetje anders dan HTML.
in HTML is de geselecteerde waarde in de vervolgkeuzelijst gedefinieerd met het selectedkenmerk:
HTML:
<select>
<option value="Ford">Ford</option>
<option value="Volvo" selected>Volvo</option>
<option value="Fiat">Fiat</option>
</select>In React wordt de geselecteerde waarde gedefinieerd met een value
attribuut op de selecttag:
Voorbeeld:
Een eenvoudige selectiebox, waarbij de geselecteerde waarde "Volvo" wordt geïnitialiseerd in de constructor:
function MyForm() {
const [myCar, setMyCar] = useState("Volvo");
const handleChange = (event) => {
setMyCar(event.target.value)
}
return (
<form>
<select value={myCar} onChange={handleChange}>
<option value="Ford">Ford</option>
<option value="Volvo">Volvo</option>
<option value="Fiat">Fiat</option>
</select>
</form>
)
}
Door deze kleine wijzigingen in <textarea>en aan te brengen <select>, kan React alle invoerelementen op dezelfde manier verwerken.