React-Formulare und Ereignisse
In diesem Kapitel besprechen wir, wie man Formulare in React verwendet.
HTML-Formularelemente unterscheiden sich in React von anderen DOM-Elementen, weil Formularelemente auf natürliche Weise einen internen Zustand beibehalten.
In HTML behalten Formularelemente wie <input>, <textarea> und <select> ihren eigenen Zustand bei und aktualisieren sich basierend auf Benutzereingaben. In React hingegen wird veränderlicher Zustand normalerweise in der state-Eigenschaft der Komponente gespeichert und kann nur mit der Methode setState() aktualisiert werden.
Ein einfaches Beispiel
Im Beispiel setzen wir den Eingabewertvalue = {this.state.data}. Wenn sich der Eingabewert ändert, können wir den Zustand aktualisieren. Wir können dasonChange-Ereignis verwenden, um Änderungen der Eingabe zu überwachen und den Zustand zu ändern.
React-Beispiel
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'Hallo Beispiel!'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
render() {
var value = this.state.value;
return <div>
<input type="text" value={value} onChange={this.handleChange} />
<h4>{value}</h4>
</div>;
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<HelloMessage />
);
Selbst ausprobieren »
Der obige Code rendert ein input-Element mit dem Wert "Hello Example!" und reagiert darauf, den vom Benutzer eingegebenen Wert über das onChange-Ereignis zu aktualisieren.
Beispiel 2
Im folgenden Beispiel zeigen wir, wie man Formulare in einer untergeordneten Komponente verwendet.onChangeDie Methode löst die State-Aktualisierung aus und übergibt den aktualisierten Wert an das Eingabefeld der untergeordneten Komponentevaluevalue, um die Benutzeroberfläche neu zu rendern.
Sie müssen in der übergeordneten Komponente einen Ereignishandler erstellen (handleChange) und ihn als Prop (updateStateProp) an Ihre untergeordnete Komponente übergeben.
React-Beispiel
class Content extends React.Component {
render() {
return (
<div>
<input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} />
<h4>{this.props.myDataProp}</h4>
</div>
);
}
}
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = { value: 'Hallo Beispiel!' };
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value });
}
render() {
var value = this.state.value;
return (
<div>
<Content myDataProp={value} updateStateProp={this.handleChange} />
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<HelloMessage />);
Selbst ausprobieren »
Dropdown-Menü auswählen
In React verwendet man nicht das selected-Attribut; stattdessen verwendet man das value-Attribut am Root-select-Tag, um das ausgewählte Element anzugeben.
React-Beispiel
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'coconut'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('Dein Lieblingsgeschmack ist: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Wähle deine Lieblingswebsite
<select value={this.state.value} onChange={this.handleChange}>
<option value="gg">Google</option>
<option value="rn">Beispiel</option>
<option value="tb">Taobao</option>
<option value="fb">Facebook</option>
</select>
</label>
<input type="submit" value="Absenden" />
</form>
);
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<FlavorForm />
);
Selbst ausprobieren »
Mehrere Formulare
Wenn Sie mehrere Eingabeelemente verarbeiten müssen, können Sie jedem Element ein name-Attribut hinzufügen, sodass die Handler-Funktion anhand desevent.target.nameWerts entscheidet, was zu tun ist.
React-Beispiel
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
render() {
return (
<form>
<label>
Verlassen:
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
</label>
<br />
<label>
Anzahl der Besucher:
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
</label>
</form>
);
}
}
Selbst ausprobieren »
React-Ereignisse
Das folgende Beispiel zeigt, wie Daten durch das onClick-Ereignis geändert werden:
React-Beispiel
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'Hallo Beispiel!'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: 'Example'})
}
render() {
var value = this.state.value;
return <div>
<button onClick={this.handleChange}>Klick mich</button>
<h4>{value}</h4>
</div>;
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<HelloMessage />
);
Selbst ausprobieren »
Wenn Sie denstatestate der übergeordneten Komponente aktualisieren müssen, müssen Sie einen Event-Handler in der übergeordneten Komponente erstellen (handleChange) und ihn als Prop übergeben (updateStateProp) an deine untergeordnete Komponente.
React-Beispiel
class Content extends React.Component {
render() {
return <div>
<button onClick = {this.props.updateStateProp}>Klick mich</button>
<h4>{this.props.myDataProp}</h4>
</div>
}
}
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'Hallo Beispiel!'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: 'Example'})
}
render() {
var value = this.state.value;
return <div>
<Content myDataProp = {value}
updateStateProp = {this.handleChange}></Content>
</div>;
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<HelloMessage />
);
Selbst ausprobieren »
Weitere Erweiterungen