Verwenden das onChange-Ereignis in React

1. onChange mit React Inputs
2. Manuelles Auslösen des Ereignisses onChange in React

Das Ereignissystem ist eine der nützlichsten Funktionen im React-Framework.

Insbesondere das Ereignis onChange ist eines der am häufigsten behandelten Ereignisse in React. Es basiert auf dem bekannten onchange-Attribut in Vanilla-JavaScript, aber das onChange-Ereignis in React enthält einige zusätzliche Funktionen.

Es ist auch in camelCase geschrieben, um Entwicklern zu helfen, es von regulären JavaScript-Ereignissen zu unterscheiden.

Wenn Sie wissen, wie das Ereignis onChange genau funktioniert, können Sie leistungsfähigere, dynamischere Formulare schreiben.

onChange mit React Inputs

In React tritt das Ereignis onChange auf, wenn sich die Eingaben der Benutzer in irgendeiner Weise ändern. Eine Eingabe kann sich ändern, wenn der Benutzer zusätzlichen Text eingibt, eine andere Option auswählt, das Kontrollkästchen deaktiviert oder in ähnlichen Fällen.

Stellen Sie sich eine Situation vor, in der Sie eine Checkbox-Eingabe haben und die Auswahl der Benutzer (einen booleschen Wert) im Status speichern müssen. In diesem Szenario wäre onChange sehr hilfreich. Jedes Mal, wenn der Benutzer seine Meinung über die Eingabe ändert und sie deaktiviert, wird der Status aktualisiert.

Hier ist ein Beispiel:

return (
		<input type="checkbox" onChange={(e) => this.setState("status": e.target.value)}/> 
		)

Dies ist eine einfache Demonstration, wie nützlich ein onChange-Ereignis sein kann.

Wir machen dieses Element zu einer kontrollierten Eingabe, indem wir den Eingabewert in unserer Komponente state speichern. Dieser Begriff beschreibt Eingänge, deren interner Zustand mit dem Zustand der Reaktionskomponente verschmolzen wird, um eine einzige Wahrheitsquelle bereitzustellen.

Beachten Sie, dass die JavaScript-Ausdrücke in JSX zwischen zwei geschweiften Klammern platziert werden müssen. Wir könnten den Handler auch separat definieren und ihn innerhalb der geschweiften Klammern aufrufen.

Zum Beispiel:

<input type="checkbox" onChange={(e) => handleChange(e)}/> 

Für komplexere Handlerfunktionen wäre dies ein besser lesbarer Ansatz.

Manuelles Auslösen des Ereignisses onChange in React

In einigen Fällen müssen Sie möglicherweise das Standardverhalten umgehen und das Ereignis onChange manuell auslösen.

Stellen Sie sich vor, der Browser füllt Ihr Passwort automatisch aus, damit der onChange nicht ausgelöst wird, aber Sie brauchen ihn, um eine Animation auszuführen. In diesem Szenario müssen Sie onChange manuell auslösen.

Um doppelte Instanzen derselben Ereignisse zu vermeiden, schluckt React manchmal absichtlich einige Ereignisse und führt sie nicht aus. Die Lösung besteht darin, den nativen Wertesetzer setNativeValue() zu verwenden. Um ein tieferes Verständnis des Problems zu erhalten, lesen Sie diesen hilfreichen Blogbeitrag.