Reageervorms
Net soos in HTML, gebruik React vorms om gebruikers in staat te stel om met die webblad te kommunikeer.
Voeg vorms in React by
Jy voeg 'n vorm met React soos enige ander element by:
Voorbeeld:
Voeg 'n vorm by wat gebruikers toelaat om hul naam in te voer:
function MyForm() {
return (
<form>
<label>Enter your name:
<input type="text" />
</label>
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Dit sal normaal werk, die vorm sal ingedien word en die bladsy sal verfris.
Maar dit is oor die algemeen nie wat ons in React wil hê moet gebeur nie.
Ons wil hierdie verstekgedrag voorkom en laat React die vorm beheer.
Hantering van vorms
Die hantering van vorms gaan oor hoe jy die data hanteer wanneer dit van waarde verander of ingedien word.
In HTML word vormdata gewoonlik deur die DOM hanteer.
In React word vormdata gewoonlik deur die komponente hanteer.
Wanneer die data deur die komponente hanteer word, word al die data in die komponenttoestand gestoor.
Jy kan veranderinge beheer deur gebeurtenishanteerders in die
onChangekenmerk by te voeg.
Ons kan die useStateHook gebruik om tred te hou met elke invoerwaarde en 'n "enkele bron van waarheid" vir die hele toepassing te verskaf.
Sien die React Hooks- afdeling vir meer inligting oor Hooks.
Voorbeeld:
Gebruik die onChangehaak om die invoer te bestuur:
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'));
Word gesertifiseer!
$ 95 INSKRYF
Dien van vorms in
Jy kan die indiening-aksie beheer deur 'n gebeurtenishanteerder in die onSubmitkenmerk vir die : by te voeg <form>:
Voorbeeld:
Voeg 'n indien-knoppie en 'n gebeurtenishanteerder by die onSubmitkenmerk:
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'));
Veelvuldige invoervelde
Jy kan die waardes van meer as een invoerveld beheer deur 'n
namekenmerk by elke element by te voeg.
Ons sal ons toestand inisialiseer met 'n leë voorwerp.
Om toegang te verkry tot die velde in die gebeurtenis hanteerder gebruik die
event.target.nameen
event.target.valuesintaksis.
Om die staat op te dateer, gebruik vierkantige hakies [hakiesnotasie] om die eiendomnaam.
Voorbeeld:
Skryf 'n vorm met twee invoervelde:
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'));
Let wel: Ons gebruik dieselfde gebeurtenis hanteerder funksie vir beide invoer velde, ons kan een gebeurtenis hanteerder vir elke skryf, maar dit gee ons baie skoner kode en is die voorkeur manier in React.
Teksarea
Die teksarea-element in React verskil effens van gewone HTML.
In HTML was die waarde van 'n teksarea die teks tussen die beginmerker
<textarea>
en die eindmerker </textarea>.
<textarea>
Content of the textarea.
</textarea>In React word die waarde van 'n teksarea in 'n waarde-kenmerk geplaas. Ons sal die useStateHook gebruik om die waarde van die teksarea te beheer:
Voorbeeld:
'n Eenvoudige teksarea met 'n bietjie 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'));
Kies
'n Aftreklys, of 'n kiesblokkie, in React is ook 'n bietjie anders as HTML.
in HTML is die geselekteerde waarde in die aftreklys gedefinieer met die selectedkenmerk:
HTML:
<select>
<option value="Ford">Ford</option>
<option value="Volvo" selected>Volvo</option>
<option value="Fiat">Fiat</option>
</select>In React word die geselekteerde waarde gedefinieer met 'n value
kenmerk op die selectmerker:
Voorbeeld:
'n Eenvoudige kieskassie, waar die geselekteerde waarde "Volvo" in die konstruktor geïnisialiseer word:
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>
)
}
Deur hierdie geringe veranderinge aan <textarea>en aan te bring <select>, kan React alle invoerelemente op dieselfde manier hanteer.