Das onChange-Ereignis in React verwenden

Mit der onChange-Prop kann eine React-Komponente auf Änderungen an Formularfeldern reagieren. Ein Handler liest den neuen Wert des Feldes und aktualisiert den Zustand, aus dem der angezeigte Wert stammt. Reacts onChange entspricht nicht einfach dem nativen HTML-Attribut onchange: React verarbeitet Formularänderungen über sein Ereignissystem, dessen Verhalten auf React-Steuerelemente abgestimmt ist.

Verwenden Sie ein kontrolliertes Eingabefeld, wenn die Komponente den aktuellen Formularwert verwalten, validieren oder an anderer Stelle in der Oberfläche verwenden soll. Das Grundmuster: Übergeben Sie dem Steuerelement einen Zustandswert und aktualisieren Sie diesen im zugehörigen onChange-Handler.

Das onChange-Ereignis verstehen

Verknüpfen Sie einen Handler über die JSX-Prop onChange mit einem Eingabefeld, einem Textbereich oder einem Auswahlfeld. Bei Textfeldern und Auswahlfeldern lesen Sie event.target.value; bei Kontrollkästchen lesen Sie den booleschen Wert aus event.target.checked. Anschließend aktualisiert der Handler den Zustand, der zu diesem Steuerelement gehört.

Bei einem kontrollierten Formularfeld stammt der angezeigte Wert aus dem Zustand. Aktualisiert der Handler den Zustand, rendert React das Steuerelement mit dem neuen Wert. So bleiben Oberfläche und Komponentendaten synchron. Ein unkontrolliertes Steuerelement eignet sich, wenn die Komponente seinen Wert während der Interaktion nicht verwalten muss.

onChange mit Texteingabefeldern implementieren

Speichern Sie bei einem Texteingabefeld einen String im Zustand, übergeben Sie ihn über value und aktualisieren Sie ihn anhand des Ereignisses. In einer Klassenkomponente mit name im Zustand kann das JSX-Steuerelement so aussehen: <input value={this.state.name} onChange={event => this.setState({ name: event.target.value })} />. Durch die Zustandsaktualisierung wird der angezeigte Text bei jeder Eingabe angepasst. Der Zustandswert sollte während der gesamten Lebensdauer des Eingabefelds ein String bleiben.

Das folgende ausführbare JavaScript veranschaulicht getrennt die Handler-Logik für ein Textfeld, ein Kontrollkästchen und ein Auswahlfeld. Kleine Setter zeigen, welche Ereigniseigenschaft der jeweilige Handler ausliest; React-Steuerelemente werden damit nicht gerendert. Die JSX-Beispiele in diesem Artikel zeigen, wie diese Werte mit kontrollierten React-Steuerelementen verbunden werden. Sichtbare Beschriftungen in den unveränderten Beispielblöcken bleiben Englisch.

let name = '';
let subscribed = false;
let category = 'books';

const setName = (value) => { name = value; };
const setSubscribed = (value) => { subscribed = value; };
const setCategory = (value) => { category = value; };

const handleNameChange = (event) => setName(event.target.value);
const handleSubscribedChange = (event) => setSubscribed(event.target.checked);
const handleCategoryChange = (event) => setCategory(event.target.value);

handleNameChange({ target: { value: 'Ada' } });
handleSubscribedChange({ target: { checked: true } });
handleCategoryChange({ target: { value: 'music' } });

console.log(`Name: ${name}`);
console.log(`Subscribed: ${subscribed}`);
console.log(`Category: ${category}`);

Name: Ada
Subscribed: true
Category: music

In einer React-Komponente entsprechen die Setter der ausführbaren Veranschaulichung Zustandsaktualisierungen. Der angezeigte Wert des Steuerelements stammt aus diesem Zustand, sodass React Ansicht und Daten synchron halten kann.

Mit Kontrollkästchen arbeiten

Ein Kontrollkästchen steht für eine boolesche Auswahl. Steuern Sie seine Auswahl daher mit checked und lesen Sie im Handler event.target.checked aus. In einer Klassenkomponente kann das Kontrollkästchen checked={this.state.subscribed} und onChange={event => this.setState({ subscribed: event.target.checked })} verwenden. Die value-Prop des Kontrollkästchens enthält den übermittelten Formularwert; sie gibt nicht an, ob das Kästchen ausgewählt ist.

onChange mit Auswahlfeldern verwenden

Übergeben Sie bei einem Auswahlfeld den ausgewählten Zustand über value und lesen Sie die neue Auswahl aus event.target.value. Verwenden Sie zum Beispiel <select value={this.state.category} onChange={event => this.setState({ category: event.target.value })}><option value="books">Books</option><option value="music">Music</option></select>. Der Wert einer Option wird im Zustand gespeichert und kann sich von ihrer sichtbaren Beschriftung unterscheiden. Durch die Zustandsaktualisierung richten sich die ausgewählte Option und davon abhängige Oberflächenelemente nach derselben Datenquelle.

Bewährte Vorgehensweisen für onChange

Halten Sie Handler darauf beschränkt, das Ereignis auszulesen und den passenden Zustand zu aktualisieren. Platzieren Sie die Validierung dort, wo sie zum Formular passt: Validieren Sie beispielsweise während der Eingabe, wenn sofortiges Feedback hilfreich ist, oder erst beim Absenden, wenn Rückmeldungen während der Eingabe ablenken würden. Achten Sie darauf, dass die value-Prop und der zugehörige Zustandswert denselben Typ verwenden. Für den Auswahlzustand eines Kontrollkästchens verwenden Sie checked.

Debouncing kann helfen, wenn ein Handler aufwendige Arbeit auslöst, etwa das Filtern eines großen Datensatzes oder eine Suchanfrage. Es verzögert die Reaktion und verhindert nicht automatisch React-Renderings. Setzen Sie es deshalb nur ein, wenn sowohl die Arbeit als auch die Nutzererfahrung davon profitieren. Den kontrollierten Zustand bei jedem Tastendruck zu aktualisieren, ist ein übliches Muster.

Das DOM-Attribut eines Eingabefelds programmatisch zu ändern, ist ein fortgeschrittener Sonderfall. Die direkte Zuweisung eines Werts garantiert für sich allein nicht, dass React die Änderung erkennt oder den erwarteten Handler aufruft. Aktualisieren Sie vorzugsweise den Zustand, der das Eingabefeld steuert. Wenn externer Code mit einem Formularfeld interagieren muss, verwenden Sie nach Möglichkeit die öffentliche Schnittstelle der Komponente und prüfen Sie das Verhalten in dieser Integration. Hilfsfunktionen wie setNativeValue sind weder allgemeine React-APIs noch garantierte Lösungen.

Fazit

React-Handler für onChange verbinden Benutzereingaben mit dem Komponentenstatus. Lesen Sie bei Text- und Auswahlfeldern value, bei Kontrollkästchen checked aus und rendern Sie kontrollierte Steuerelemente anschließend anhand des aktualisierten Zustands. Richten Sie Validierung und Debouncing nach den Anforderungen des Formulars aus, statt sie pauschal einzusetzen.

Häufig gestellte Fragen

1. Was bewirkt onChange in React? Bei einer Änderung an einem Formularfeld wird ein Handler aufgerufen. Die Komponente kann so den neuen Wert auslesen und ihre Daten oder ihren Zustand aktualisieren.

2. Wie verarbeite ich ein Texteingabefeld? Übergeben Sie dem Feld einen String aus dem Zustand über die value-Prop und aktualisieren Sie diesen Zustand im onChange-Handler anhand von event.target.value.

3. Wie verarbeite ich ein Kontrollkästchen? Steuern Sie es über einen booleschen Zustand mit checked und aktualisieren Sie diesen Zustand anhand von event.target.checked.

4. Wie verarbeite ich ein Auswahlfeld? Setzen Sie dessen value anhand des Zustands und aktualisieren Sie diesen bei einer Auswahländerung anhand von event.target.value.

5. Sollte ich jeden onChange-Handler mit Debouncing versehen? Nein. Ziehen Sie Debouncing in Betracht, wenn der Handler aufwendige Arbeit auslöst. Für jede Zustandsaktualisierung ist es nicht nötig und weniger Renderings garantiert es ebenfalls nicht.

6. Warum ruft eine programmatische Wertänderung meinen Handler möglicherweise nicht auf? Eine direkte Zuweisung eines DOM-Werts löst die Änderungsverarbeitung von React nicht unbedingt aus. Aktualisieren Sie den Zustand, der das Eingabefeld steuert, oder verwenden Sie die unterstützte Schnittstelle der Komponente.