Einführung in React, Folge 3: Eingaben verarbeiten
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?
- Golo Roden
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.
Einführung in React
- Folge 1: Erste Schritte
- Folge 1.1: Release von React 16
- Folge 2: Ein tieferer Einblick
- Folge 3: Eingaben verarbeiten
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:
Empfohlener redaktioneller Inhalt
Mit Ihrer Zustimmmung wird hier eine Vimeo-Video (Vimeo LLC) geladen.
Ich bin damit einverstanden, dass mir externe Inhalte angezeigt werden. Damit können personenbezogene Daten an Drittplattformen (Vimeo LLC) übermittelt werden. Mehr dazu in unserer Datenschutzerklärung.
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. ()
