ReactJS lernen

Auf Nutzereingaben reagieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Interaktivität kann in einer Anwendung erst auftreten, sobald diese einen Zustand hat, der sich ändern kann. In diesem Video sehen Sie, wie auf Nutzereingaben mit einer Zustandsänderung reagiert wird.
04:32

Transkript

Props sind in React die Möglichkeit, einer Komponente von außen Parameter mitzugeben. Da sie in der Komponente selber jedoch schreibgeschützt sind, eignen sie sich nicht, um den inneren Zustand einer Komponente zu beschreiben. Hier kommt das state-Objekt zum Einsatz. Wir haben eine Klasse Product, die in der Lage ist, Titel und Beschreibung eines Produkts darzustellen. Wir erweitern das Produkt um die Funktionalität, beobachtet zu werden. Zuerst müssen wir das state-Objekt initialisieren. Dazu sagen wir einfach this.state = und eröffnen ein neues Objekt. Dazu setzen wir gleich eine Eigenschaft watched: false. In der render-Methode können wir nun auf diesen Zustand zugreifen. Wir erstellen eine neue Variable beziehungsweise eine neue Konstante, watched = this.state.watched. Das ist nur, damit wir später weniger schreiben müssen. Und wir fügen einen neuen Absatz ein, hier unten. Dieser Absatz enthält einen button und einen Text. Da wir in diesem Text wieder JavaScript verwenden möchten, beginnen wir mit der geschweiften Klammer und wir setzen hier einen Konditionalausdruck hinein. Wir schreiben "wenn der Artikel gerade gewachted wird, dann möchten wir anzeigen You are watching the product". Ansonsten möchten wir keinen Text anzeigen. Beim Button analog dazu. Wenn das aktuelle Produkt gewachted, also beobachtet wird, dann möchten wir, dass der Button den Titel hat Unwatch. Ansonsten, falls das Produkt gerade nicht beobachtet wird, möchten wir, dass der Button den Titel Watch! trägt. Zusätzlich möchten wir einen Click-Handler für den Button hinzufügen. Deshalb bekommt dieser Button ein Prop namens onClick. Und in diesem Click-Handler, der auch wieder mit einer geschweiften Klammer beginnt, weil es sich um JavaScript handelt, geben wir eine Methode auf unserer Klasse an, nämlich this._handleWatchClick.bind(this). _handleWatchClick haben wir hier oben definiert. Was macht _handleWatchClick? Ganz einfach. Es ändert den state. Es setzt nämlich die aktuelle Variable watched im state auf den gegenteiligen Wert, also es negiert die Variable einfach. Dazu muss einmal gesagt werden, wir dürfen den state nie manuell manipulieren. Das heißt, wir dürfen jetzt nicht einfach schreiben this.state.watched = !this.state.watched. Sondern Veränderungen des state müssen immer über einen Aufruf von this.setState ablaufen. Das liegt daran, dass die setState-Methode von React kommt und gewisse Dinge im Lebenszyklus dieser React-Komponente auslöst, unter anderem ein erneutes Rendern. Das heißt also, in dem Moment, wo setState fertig ausgeführt wurde, und wir die Variable watched negiert haben, wird unsere Komponente neu gerendert. Wenn wir direkt auf den state zugreifen würden, könnte es sein, dass wir eine Inkonsistenz in den Daten beziehungsweise im Zustand der Komponente hervorrufen. Ansonsten ist noch zu beachten, dass wir hier bei der Mitgabe des Click-Handlers, nämlich _handleWatchClick, noch diesen Aufruf an die bind-Methode machen, mit this als Argument. Das liegt ganz einfach daran, dass wenn wir das nicht machen würden, this innerhalb dieses Kontexts falsch gesetzt wäre. Das heißt, wenn wir dieses bind nicht mit aufrufen würden, dann würde dieser Click-Handler _handleWatchedClick ausgelöst werden bei jedem auf den Klick auf den Button. Aber hier im Methodenrumpf wäre this nicht richtig definiert und dementsprechend könnte der state auch nicht richtig gesetzt werden. Deshalb muss in diesem Fall bei Click-Handlern immer ein bind-Aufruf erfolgen. Lassen Sie uns unsere Applikation einmal kompilieren. Und dann prüfen wir mal, ob mit der Beobachtung alles so läuft, wie wir es uns vorstellen. Dazu ein Rechtsklick, Open in Browser. Und wir sehen tatsächlich, wir haben einen Watch!-Button bekommen. Probieren wir den mal aus. Und wir haben den Text "You are watching the product". Der Button-Text hat sich auch geändert auf Unwatch. Nochmal rumprobieren. Das funktioniert also einwandfrei. In diesem Video haben Sie erfahren, wie Sie das state-Objekt nutzen können, um intern den Zustand einer React-Komponente zu verwalten. Sie wissen nun, dass Sie per this.state auf das state-Objekt zugreifen können, und dass Sie mit this.setState den Zustand verändern und ein erneutes Rendern auslösen können.

ReactJS lernen

Sehen Sie, wie Ihre Anwendung mit der Hilfe von ReactJS von einem virtuellen DOM (Document Object Model) profitiert.

2 Std. 20 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
Erscheinungsdatum:05.08.2016
Laufzeit:2 Std. 20 min (19 Videos)

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!