Formularze reakcji
Podobnie jak w HTML, React używa formularzy, aby umożliwić użytkownikom interakcję ze stroną internetową.
Dodawanie formularzy w React
Dodajesz formularz z Reactem jak każdy inny element:
Przykład:
Dodaj formularz, który pozwala użytkownikom wpisać swoje imię i nazwisko:
function MyForm() {
return (
<form>
<label>Enter your name:
<input type="text" />
</label>
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Będzie to działać normalnie, formularz zostanie przesłany, a strona odświeżona.
Ale generalnie nie jest to to, czego chcemy w React.
Chcemy zapobiec temu domyślnemu zachowaniu i pozwolić React kontrolować formularz.
Obsługa formularzy
Obsługa formularzy dotyczy sposobu obsługi danych, gdy zmienią one wartość lub zostaną przesłane.
W HTML dane formularzy są zwykle obsługiwane przez DOM.
W React dane formularzy są zwykle obsługiwane przez komponenty.
Gdy dane są obsługiwane przez komponenty, wszystkie dane są przechowywane w stanie komponentu.
Możesz kontrolować zmiany, dodając obsługę zdarzeń w
onChangeatrybucie.
Możemy użyć useStateHooka do śledzenia każdej wartości wejściowej i zapewnienia „pojedynczego źródła prawdy” dla całej aplikacji.
Zobacz sekcję Hooki reakcji , aby uzyskać więcej informacji na temat hooków.
Przykład:
Użyj onChangehaka, aby zarządzać danymi wejściowymi:
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'));
Zostać certyfikowanym!
95 $ ZAPISZ
Wysyłanie formularzy
Możesz kontrolować akcję przesyłania, dodając procedurę obsługi zdarzeń w onSubmitatrybucie dla <form>:
Przykład:
Dodaj przycisk przesyłania i procedurę obsługi zdarzeń w onSubmitatrybucie:
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'));
Wiele pól wejściowych
Możesz kontrolować wartości więcej niż jednego pola wejściowego, dodając
nameatrybut do każdego elementu.
Zainicjujemy nasz stan z pustym obiektem.
Aby uzyskać dostęp do pól w obsłudze zdarzeń, użyj
składni event.target.namei
.event.target.value
Aby zaktualizować stan, użyj nawiasów kwadratowych [notacja w nawiasach] wokół nazwy właściwości.
Przykład:
Napisz formularz z dwoma polami wejściowymi:
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'));
Uwaga: Używamy tej samej funkcji obsługi zdarzeń dla obu pól wejściowych, moglibyśmy napisać jeden program obsługi zdarzeń dla każdego, ale to daje nam znacznie czystszy kod i jest preferowanym sposobem w React.
Obszar tekstowy
Element textarea w React różni się nieco od zwykłego HTML.
W HTML wartością textarea był tekst między znacznikiem początkowym
<textarea>
a znacznikiem końcowym </textarea>.
<textarea>
Content of the textarea.
</textarea>W React wartość obszaru tekstowego jest umieszczana w atrybucie wartości. Użyjemy useStateHooka do zarządzania wartością obszaru tekstowego:
Przykład:
Prosty obszar tekstowy z pewną zawartością:
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'));
Wybierać
Lista rozwijana lub pole wyboru w React również różni się nieco od HTML.
w HTML wybrana wartość z listy rozwijanej została zdefiniowana za pomocą selectedatrybutu:
HTML:
<select>
<option value="Ford">Ford</option>
<option value="Volvo" selected>Volvo</option>
<option value="Fiat">Fiat</option>
</select>W React wybrana wartość jest definiowana value
atrybutem na selecttagu:
Przykład:
Proste pole wyboru, w którym wybrana wartość „Volvo” jest inicjowana w konstruktorze:
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>
)
}
Wprowadzając te niewielkie zmiany w <textarea>i <select>, React jest w stanie obsłużyć wszystkie elementy wejściowe w ten sam sposób.