Einführung in React, Folge 3: Eingaben verarbeiten

the next big thing  –  4 Kommentare
Anzeige

Mit React Eingaben zu verarbeiten ist auf den ersten Blick gar nicht so einfach, denn React kennt zwei Arten von Komponenten, deren Zustandsverwaltung voneinander abweicht. Außerdem gilt es zu steuern, wie Events verteilt werden. Wie funktioniert das?

Um Eingaben entgegenzunehmen, kann man in React die gängigen Steuerelemente von HTML5 verwenden. Sie verwalten ihren Zustand allerdings serienmäßig im DOM, weshalb man aus React weder lesend noch schreibend auf sie zugreifen kann. Einen einfachen Ausweg bietet das ref-Attribut, das allerdings nicht zu empfehlen ist.

Anzeige

Einführung in React

Alle Folgen und Kurse zu weiteren Themen finden sich in der tech:lounge.

Stattdessen bietet sich an, die Steuerelemente mit dem Zustand von React zu verbinden. Das geschieht mithilfe sogenannter Controlled Components. Selbstverständlich funktioniert das nicht nur für Textboxen, sondern auch für alle anderen Steuerelemente wie Auswahllisten oder Checkboxen.

Außerdem gilt es zu steuern, wie Events verteilt werden. Der Webbrowser kennt grundsätzlich zwei verschiedene Varianten, die gemeinsam als Event Propagation bezeichnet werden. Je nach gewünschter Reihenfolge der Event-Verarbeitung muss man hier gegebenenfalls eingreifen.

Wie das alles funktioniert, zeigt das folgende Video:

Einführung in React, Folge 3: Eingaben verarbeiten

tl;dr: React kann den Zustand von HTML-Steuerelementen selbst verwalten. Dazu dienen die sogenannten Controlled Components. Außerdem gilt es, die Event Propagation bei Bedarf zu steuern, damit Events kontrolliert ausgelöst und weitergereicht werden können.

Anzeige