Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

ReactJS lernen

Formulare in React nutzen

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Verwendung von Formularen in React unterscheidet sich in einigen Punkten gegenüber der Verwendung in HTML. Erfahren Sie, wie React ein konsistentes Interface bereitstellt.
11:01

Transkript

Eine der häufigeren Aufgaben beim Entwickeln einer Web-Anwendung ist die Erstellung von Formularen. Schließlich soll die Anwendung interaktiv sein und dem Nutzer Eingaben erlauben. In diesem Video zeige ich Ihnen am Beispiel des Textfelds, der Checkbox, und einer Dropdownbox, wie Sie auf Eingaben des Nutzers reagieren, den Zustand Ihrer Komponenten aktualisieren und die Eingabedaten verarbeiten können. Wir wollen unsere Anwendung dahingehend erweitern, dass wir mithilfe eines Formulars neue Produkte hinzufügen können. Dazu möchten wir zuerst unsere Produkte erweitern. Erstens wird der Zustand, ob dieses Produkt gerade beobachtet wird, also watched, nun auch aus den Props initial befüllt. Das heißt, hier bei der Initialisierung von state im constructor, lesen wir den Zustand watched aus den props. Falls watched nicht mitgegeben wird in den props, setzen wir es standardmäßig auf false. Außerdem möchten wir das Produkt um eine Kategorie erweitern, category. Standardmäßig setzen wir diese category auf Furniture, also Möbel. Da wir category als neue Eigenschaft des Produkts hinzugefügt haben, müssen wir auch die render-Methode ein klein wenig anpassen. Das heißt, wir haben hier einen neuen Absatz hinzugefügt, in dem die category aus den props gelesen wird. Als Nächstes können wir uns an das eigentliche Formular zur Eingabe der Daten heranwagen. Sehen wir uns mal die render-Methode dazu an. Wir brauchen insgesamt vier Formularfelder, nämlich einmal ein Textfeld, in dem wir den Titel eingeben können, hier das Label Title:. Dazu das input-Feld. Das input-Feld ist in React standardmäßig ein Textfeld und besitzt zwei wichtige Props. Einerseits value, hier wird der tatsächliche Inhalt des Textfelds übergeben. Diesen wollen wir aus dem state, also dem Zustand unseres Eingabeformulars auslesen. Und das zweite wichtige Prop beim React-Formularfeld ist das onChange-Prop. Hier müssen wir eine Methode mitgeben, die später genau dann ausgeführt wird, wenn sich der Wert dieses Textfelds ändert. Diese Methode, die hier angegeben ist, in unserem Fall this._handleTitleChange, wird dann später aufgerufen mit genau einem Parameter, nämlich dem Event, das ausgelöst wurde. Aber das sehen wir uns gleich noch an. Machen wir erst in der render-Methode weiter. Als zweites Formularfeld, ganz analog zum Titel, brauchen wir ein Feld, in dem wir die Description eingeben können. Auch hier lesen wir den Inhalt aus dem State, this.state.description, und übergeben eine Change-Handler-Methode, this._handleDescriptionChange. Der Unterstrich deutet übrigens nur an, dass es sich hier um eine private Methode handelt, die nicht außerhalb unserer Klasse aufgerufen werden sollte. Als Nächstes wollen wir dem Nutzer die Möglichkeit geben, eine Kategorie für sein neues Produkt auszuwählen. Dazu wählen wir das select, also eine Dropdownbox. Auch hier sehen wir, dass React sehr bemüht ist, ein konsistentes Interface zu halten, da wir auch bei select genau die Props value und onChange benutzen müssen. Wir lesen auch hier wieder den aktuellen Wert des select aus der category und geben einen Change-Handler mit. In dieses select können wir nun Optionen hineinrendern. Diese sind derart gestaltet, dass zwischen den beiden Tags derjenige String steht, der später in der Dropdownliste angezeigt wird. Und mit value können wir den Wert angeben, der später beim onChange-Event genau in diesen state hineingeschrieben wird. Das heißt, ich könnte beispielsweise an dieser Stelle auch auf Deutsch "Möbel" hineinschreiben. Aber sobald diese Option ausgewählt wird, würde hier in den value des gesamten select der value dieser Option hineingeschrieben werden. Schließlich wollten wir noch eine Checkbox haben. Das ist hier der input type="checkbox", mit dem wir auswählen können, ob das neue Produkt auch beobachtet werden soll, hier Watched?. Auch hier wieder genau das gleiche Interface. value lesen wir aus this.state.watched und einen Change-Handler hinterher. Abschließend noch einen button, mit dem wir dann tatsächlich ein neues Produkt hinzufügen können. Wie funktionieren jetzt eigentlich all diese Handler? Nun, ganz einfach, sehen wir uns mal das Beispiel des _handleDescriptionChange an. Dieser Handler bekommt ein event. Und jedes Mal, wenn sich der Inhalt des Textfelds mit der description ändert, wird einfach diese Methode mitsamt dem Change-Event aufgerufen. In dieser Methode machen wir nichts weiter, als den state neu zu setzen. Und zwar können wir aus diesem Event den neuen Wert des Textfelds herauslesen, und zwar über event.target.value. Im Prinzip machen wir genau das Gleiche bei _handleTitleChange. Das ist ja auch ein einfaches Textfeld. Bei _handleWatchChange machen wir auch fast das Gleiche, nur mit dem kleinen Unterschied, dass wir nicht auf event.target.value, sondern event.target.checked zurückgreifen. Beim _handleCategoryChange, also bei der Reaktion auf einen Wechsel der Dropdownbox haben wir wiederum die gleiche Struktur wie beim Wechsel des Werts eines Textfelds. Schließlich brauchen wir noch einen Handler für das, was passieren soll, wenn der Button gedrückt wird, nämlich das Hinzufügen eines neuen Produkts. Und an dieser Stelle wird es interessant, denn wir rufen hier this.props.onProductAdd auf. Was genau heißt das? Wir definieren mit den propTypes, dass wir ein Prop entegegenehmen möchten, welches onProductAdd heißt. Und dieses Prop soll vom Typ func sein, also eine Funktion. Und wir sagen zusätzlich, dass diese Funktion required ist. Das hat den einfachen Grund, dass wir hier in unserer AddProductForm-Komponente keine Annahme darüber treffen wollen, in welche andere React-Komponente wir später hineingerendert werden. Das heißt, da, wir nicht wissen und auch überhaupt nicht wissen wollen, wo wir später landen werden, müssen wir ein Interface anbieten, mit dem die aufrufende beziehungsweise uns rendernde Komponente die Möglichkeit hat, unseren Inhalt zu bekommen. Das heißt also, wir erwarten, dass die Komponente, die unser AddProductForm rendert und über das Drücken der Add-a-Product-Schaltfläche informiert werden möchte, uns eine Funktion übergibt, die ein Argument entgegennimmt. Und diese werden wir dann später aufrufen, sobald die Schaltfläche gedrückt wird. Und als Argument geben wir den aktuellen Inhalt unserer Formularfelder in Form eines Objekts wieder. Und über diese Funktion kann die Komponente, die unsere AddProductForm rendert auf unsere Änderungen beziehungsweise auf unser neues Produkt reagieren. Und genau das passiert auch in der App.js. Wenn wir sie uns hier nochmal anschauen. Im state haben wir eine Liste namens products. Die enthält alle Products, die gerade angezeigt werden. In der render-Methode sehen wir, dass wir beispielsweise direkt unter der Überschrift unsere AddProductForm hineinrendern können. Und wir geben hier eine Prop mit namens onProductAdd. Und genau hier haben wir einen Handler dafür. Das heißt, wie wir gerade gesehen haben in AddProductForm, erwarten wir dass bei onProductAdd eine Funktion übergeben wird, die ein Argument entgegennimmt. Und dieses Argument soll das neue Product sein. Genau das definieren wir hier. Wie reagieren wir also darauf, dass der Button gedrückt wird mit Add a Product? Wir setzen einfach den state in unserer App neu und fügen zu unseren bereits bestehenden Produkten das neue Produkt hinzu, mit dem concat-Befehl. Lassen Sie uns das Ganze doch mal ausprobieren. Wir kompilieren das Frontend und wechseln in den Browser. Und wir sehen, wir haben jetzt hier unter der Überschrift unsere Formularfelder, um ein neues Produkt hinzuzufügen. Probieren wir es mal komplett ohne Eingabe. Wir sehen schon, wir haben ein viertes Produkt dazubekommen. "Untitled", "product has no description". "Category: Furniture". Und beobachtet wird es anscheinend gerade auch nicht. Nehmen wir einige Änderungen vor. Nehmen wir mal "titel" und "beschreibung". Als Kategorie nehmen wir mal Electronics. Und wir sagen, dass es auch watched sein soll. Wir fügen das Produkt hinzu. Und wir sehen es passt, "titel", "beschreibung", "Category: Electronics". Und es wird sogar gerade beobachtet. Zuletzt noch ein kleiner Hinweis, der ES6-spezifisch ist. Es ist so, dass wenn Sie hier einen Handler mitgeben, also beispielsweise in der onClick-Methode, Sie unbedingt darauf achten müssen, dass der this-Kontext richtig gesetzt ist. Das heißt, hier können das sicherstellen, indem wir bind aufrufen mit this in der Klammer. Ansonsten würde hier an dieser Stelle this nicht richtig gesetzt sein und dementsprechend setState fehlschlagen. Das ist deswegen ein ES6-spezifischer Hinweis, weil wenn Sie React mit ES5 verwenden würden, dementsprechend nicht React.Component extenden, sondern React.createClass verwenden, würde React für Sie ein sogenanntes Autobinding durchführen. Das heißt, bereits beim Erstellen Ihrer Klasse würde React automatisch auf allen Methoden Ihrer Klasse die bind-Methode mit this als Argument durchführen. Genau das Gleiche können wir in ES6 aber auch manuell simulieren, indem wir im constructor genau diesen Aufruf machen. Wir können nämlich hier schreiben this._handleProductAdd = this._handleProductAdd.bind(this). Wenn wir das im constructor machen, hat das einfach den Vorteil, dass der Rest der Datei ein bisschen übersichtlicher wird, da wir das einerseits nur einmal machen müssen, und andererseits ein bisschen Code in der render-Methode sparen, die ohnehin unter Umständen unübersichtlich werden kann. Hier sehen wir den Unterschied. _handleRemove wurde beispielsweise nicht im constructor mit bind aufgerufen. Deshalb müssen wir das hier in der render-Methode bei jedem einzelnen Aufruf tun. _handleProductAdd im Gegensatz dazu wurde bereits im constructor mit bind aufgerufen. Und deshalb muss das nicht mehr hier in der render-Methode geschehen. Sie haben gerade gesehen, wie Sie in React mit Formularen umgehen können. Sie wissen insbesondere, wie Sie die Komponenten input und select einsetzen können, sowie deren Zustandsänderungen abgreifen und verarbeiten 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
Erscheinungsdatum:05.08.2016

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!