Reagovat formuláře
Stejně jako v HTML, React používá formuláře, které uživatelům umožňují interakci s webovou stránkou.
Přidávání formulářů do Reactu
Formulář přidáte pomocí React jako jakýkoli jiný prvek:
Příklad:
Přidejte formulář, který uživatelům umožní zadat jejich jméno:
function MyForm() {
return (
<form>
<label>Enter your name:
<input type="text" />
</label>
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
To bude fungovat jako obvykle, formulář se odešle a stránka se obnoví.
Ale obecně to není to, co chceme, aby se v Reactu stalo.
Chceme tomuto výchozímu chování zabránit a nechat React ovládat formulář.
Manipulace s formuláři
Manipulace s formuláři je o tom, jak zacházíte s daty, když změní hodnotu nebo se odešlou.
V HTML jsou data formuláře obvykle zpracovávána DOM.
V Reactu jsou data formuláře obvykle zpracovávána komponentami.
Když jsou data zpracovávána komponentami, všechna data jsou uložena ve stavu komponenty.
Změny můžete ovládat přidáním obslužných rutin událostí do
onChangeatributu.
Můžeme použít useStateHook ke sledování každé vstupní hodnoty a poskytnout „jediný zdroj pravdy“ pro celou aplikaci.
Další informace o hácích najdete v sekci React Hooks.
Příklad:
onChangeKe správě vstupu použijte Hook:
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'));
Získejte certifikaci!
95 $ PŘIHLÁSIT SE
Odesílání formulářů
Akci odeslání můžete řídit přidáním obsluhy události do onSubmitatributu pro <form>:
Příklad:
Přidejte tlačítko pro odeslání a obslužnou rutinu události do onSubmitatributu:
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'));
Více vstupních polí
Můžete ovládat hodnoty více než jednoho vstupního pole přidáním
nameatributu ke každému prvku.
Inicializujeme náš stav prázdným objektem.
Pro přístup k polím v obslužné rutině události použijte
syntaxi event.target.namea
.event.target.value
Chcete-li aktualizovat stav, použijte hranaté závorky [závorky] kolem názvu vlastnosti.
Příklad:
Napište formulář se dvěma vstupními poli:
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'));
Poznámka: Pro obě vstupní pole používáme stejnou funkci obsluhy události, pro každé bychom mohli napsat jednu obsluhu události, ale to nám dává mnohem čistší kód a je to preferovaný způsob v Reactu.
Textarea
Element textarea v Reactu se mírně liší od běžného HTML.
V HTML byl hodnotou textarea text mezi počáteční
<textarea>
a koncovou značkou </textarea>.
<textarea>
Content of the textarea.
</textarea>V Reactu je hodnota textarea umístěna v atributu value. Použijeme useStateHook ke správě hodnoty textarea:
Příklad:
Jednoduchá textová oblast s určitým obsahem:
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'));
Vybrat
Rozbalovací seznam nebo výběrové pole v Reactu se také trochu liší od HTML.
v HTML byla vybraná hodnota v rozevíracím seznamu definována pomocí selectedatributu:
HTML:
<select>
<option value="Ford">Ford</option>
<option value="Volvo" selected>Volvo</option>
<option value="Fiat">Fiat</option>
</select>V Reactu je vybraná hodnota definována pomocí value
atributu na selectznačce:
Příklad:
Jednoduché výběrové pole, kde je vybraná hodnota "Volvo" inicializována v konstruktoru:
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>
)
}
Provedením těchto nepatrných změn <textarea>a <select>, React dokáže zpracovat všechny vstupní prvky stejným způsobem.