Aus dem Kurs: React Grundkurs

User-Interaktionen abfangen – Tutorial zu React.js

Aus dem Kurs: React Grundkurs

Gratismonat starten Für Ihr Team erwerben

User-Interaktionen abfangen

“

Der Kern jeder Applikation sind User-Interaktionen. Solche Ereignisse, wie Klick- und Input-Events schauen wir uns nun genauer an. Dazu bauen wir einen Button, der bei Klick den Wert aus einem input-Field in eine Überschrift schreibt. Alle Events, die in HTML abgebildet werden können, sind auch intuitiv mit React nutzbar. Für ein Klick-Event verwenden wir onClick; für ein Change-Event onChange, für ein Focus-Event onFocus usw. Zuerst brauchen wir jedoch unsere drei HTML-Elemente: Die Überschrift, das Textfeld und den Button. Wir wissen jetzt schon, dass wir beim Button-Klick eine Funktion ausführen wollen, daher definieren wir diese sofort. Als Platzhalter nutzen wir vorerst einen alert-Aufruf. Wenn wir unsere Funktion buttonClicked an die onClick-Property des Button-Elements weitergeben, können wir sicherstellen, dass die Funktion beim Klick aufgerufen wird. Wenn wir das testen, sehen wir den alert. Wir wissen bereits, dass wir dynamische Wertänderungen innerhalb einer Component am besten mit useState abbilden können. Da wir die Überschrift dynamisch verändern wollen, nutzen dafür einen State. Den statischen Text ersetzen wir dann mit der state-Variable. Anstatt des alerts wollen wir mit setHeadLine innerhalb des Button-Klicks eine Platzhalterüberschrift setzen. Wenn wir dann den Button klicken, sehen wir den Platzhaltertext. Nur wie kommen wir jetzt an den Wert des Textfelds? Stellen Sie sich vor, wir wären in der Lage, useState in Verbindung mit dem Textfeld zu nutzen, dann hätten wir einen weiteren State mit inputValue und setInputValue. Beim Klick auf den Button wären wir dann in der Lage, den State vom input einfach in die Überschrift zu schreiben. Dann bleibt die Frage: Wie bekommen wir den Wert vom input-Feld nun in den inputState? Auch hier bedienen wir uns wieder Events. In diesem Falle wollen wir uns das input-Event zunutze machen. Am input-Feld schreiben wir onInput= und dann übergeben wir die Funktion, die ausgeführt werden soll. Wir definieren daher eine Funktion namens inputChanged. Wenn wir nun das Textfeld nutzen, dann wir das Event bei jedem Buchstaben getriggert. Um an den Wert vom input-Feld zu kommen, nutzen wir das Event-Object. Wenn das Event feuert, dann wird das Event-Object an die Funktion mit übergeben. Das ist auch beim Button-Klick der Fall, aber dort haben wir es nicht gebraucht. In event.target steht eine Referenz zu unserem input-Element. Da man mit input-Elementen mit .value auf den Wert zugreifen kann, können wir mit event.target.value den Wert aus dem Event auslesen. Diesen Wert können wir dann wiederum im inputState setzen. Wenn wir nun eine Eingabe im Textfeld machen, so wird jedes Mal der inputState geupdatet, d.h., wenn wir dann auf den Button klicken, können wir den Wert aus dem State in den Headline-State schreiben. Sie wissen nun, wie Sie User-Interaktionen mit JavaScript-Events abfangen können, indem Sie Event-Listener direkt im JSX hinzufügen.

Inhalt