Reaktionsformulare
Genau wie in HTML verwendet React Formulare, um Benutzern die Interaktion mit der Webseite zu ermöglichen.
Formulare in React hinzufügen
Sie fügen ein Formular mit React wie jedes andere Element hinzu:
Beispiel:
Fügen Sie ein Formular hinzu, in dem Benutzer ihren Namen eingeben können:
function MyForm() {
return (
<form>
<label>Enter your name:
<input type="text" />
</label>
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Dies funktioniert wie gewohnt, das Formular wird gesendet und die Seite wird aktualisiert.
Aber das ist im Allgemeinen nicht das, was wir in React wollen.
Wir wollen dieses Standardverhalten verhindern und React die Kontrolle über das Formular überlassen.
Umgang mit Formularen
Beim Umgang mit Formularen geht es darum, wie Sie mit den Daten umgehen, wenn sie ihren Wert ändern oder gesendet werden.
In HTML werden Formulardaten normalerweise vom DOM verarbeitet.
In React werden Formulardaten normalerweise von den Komponenten verarbeitet.
Wenn die Daten von den Komponenten verarbeitet werden, werden alle Daten im Komponentenzustand gespeichert.
Sie können Änderungen steuern, indem Sie Ereignishandler im
onChangeAttribut hinzufügen.
Wir können den useStateHook verwenden, um jeden Eingabewert zu verfolgen und eine "Single Source of Truth" für die gesamte Anwendung bereitzustellen.
Weitere Informationen zu Hooks finden Sie im Abschnitt React Hooks .
Beispiel:
Verwenden Sie den onChangeHook, um die Eingabe zu verwalten:
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'));
Zertifiziert werden!
$ 95 REGISTRIEREN
Einreichen von Formularen
Sie können die Übermittlungsaktion steuern, indem Sie einen Ereignishandler im onSubmitAttribut für Folgendes hinzufügen <form>:
Beispiel:
onSubmitFügen Sie dem Attribut eine Senden-Schaltfläche und einen Event-Handler hinzu:
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'));
Mehrere Eingabefelder
Sie können die Werte von mehr als einem Eingabefeld steuern, indem Sie
namejedem Element ein Attribut hinzufügen.
Wir werden unseren Zustand mit einem leeren Objekt initialisieren.
Um auf die Felder im Event-Handler zuzugreifen, verwenden Sie die
event.target.nameand
event.target.value-Syntax.
Verwenden Sie zum Aktualisieren des Status eckige Klammern [Klammernnotation] um den Eigenschaftsnamen.
Beispiel:
Schreiben Sie ein Formular mit zwei Eingabefeldern:
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'));
Hinweis: Wir verwenden dieselbe Event-Handler-Funktion für beide Eingabefelder, wir könnten für jedes einen Event-Handler schreiben, aber das gibt uns viel saubereren Code und ist der bevorzugte Weg in React.
Textbereich
Das Textarea-Element in React unterscheidet sich geringfügig von gewöhnlichem HTML.
In HTML war der Wert eines Textbereichs der Text zwischen dem Start-Tag
<textarea>
und dem End-Tag </textarea>.
<textarea>
Content of the textarea.
</textarea>In React wird der Wert eines Textfeldes in ein Wertattribut gestellt. Wir verwenden den useStateHook, um den Wert des Textbereichs zu verwalten:
Beispiel:
Ein einfacher Textbereich mit etwas Inhalt:
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'));
Wählen
Eine Dropdown-Liste oder ein Auswahlfeld in React unterscheidet sich ebenfalls ein wenig von HTML.
in HTML wurde der ausgewählte Wert in der Dropdown-Liste mit dem selectedAttribut definiert:
HTML:
<select>
<option value="Ford">Ford</option>
<option value="Volvo" selected>Volvo</option>
<option value="Fiat">Fiat</option>
</select>In React wird der ausgewählte Wert mit einem value
Attribut auf dem selectTag definiert:
Beispiel:
Eine einfache Auswahlbox, bei der der ausgewählte Wert "Volvo" im Konstruktor initialisiert wird:
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>
)
}
Durch diese geringfügigen Änderungen an <textarea>und <select>ist React in der Lage, alle Eingabeelemente auf die gleiche Weise zu behandeln.