ReactJS und Databinding – ein kleines Beispiel

Heute möchte ich in einem kürzeren Beitrag eine Stärke von ReactJS vorstellen – das Databinding. In dem hier aufgeführten Beispiel habe ich eine Liste von Städten. Diese werden über eine Selectbox anhand des Anfangsbuchstabens gefiltert.

Die Applikation hat hier nur einen Haupt-Component. Die Liste lese ich von einem JSON Objekt (Natürlich könnte man hier auch ein Adapter einsetzen, das die Daten via Request aus einer anderen Datei oder Service zieht). Die render() Methode liefert im Grunde nur drei Bereiche aus

  • Headline
  • Filter
  • Liste

Ein Blick in die Typescript Klasse

Der Header ist rein eine Überschrift und nicht so spannend, den lassen wir mal aus. Wir fangen mit der Listenausgabe an:

ReactJS Listing Filter Code des Listings
ReactJS Listing Filter Code des Listings

Über die map() Funktion iterieren wir, um die Daten als gerenderte Div-Tags auszugeben. Dies wird mit der If/else Bedingung geknüpft, das kein Filter gesetzt (===“) oder der richtige Anfangsbuchstabe beim title-Attribut vorliegt.

ReactJS Listing Filter Data JSON
ReactJS Listing Filter Data JSON

Hier der Vollständigkeit halber, die Daten / Datenstruktur des JSON-Objekts, als Konstante direkt zugewiesen.

ReactJS Listing Filter Code des Filters
ReactJS Listing Filter Code des Filters

Der HTML-Bereich für den Filter. Wieder über die map() Funktion werden alle Buchstaben als Options in die Selectbox gegeben. Das onChange Event führt dann dazu, das die state Variable geändert wird. Passiert dies, arbeitet der virtuelle DOM von ReactJS alle möglichen Änderungen noch einmal aus und das gerenderte HTML ändert sich entsprechend. Durch dieses Databinding wird es sehr einfach, ganze Applikationen und Befehlsketten von einander abhängig zu machen.

Das Databinding über die „state“ Variable

ReactJS Listing Filter Code des onChange Events - Databinding
ReactJS Listing Filter Code des onChange Events

Alles genau im Detail kann  man sich unter Github ansehen, wo ich das Projekt abgelegt habe. Zur Github-Projekt Seite.

Der ReactJS-Listenfilter als Beispiel

Bitte einfach ausprobieren und in der Selectbox zum Beispiel „d“ oder „b“ auswählen.

Das gesamte Projekt kann man sich auf Github herunterladen:
https://github.com/viebrockjoern/react-typescript-list-filter/tree/Adding-Filter-Elements

 

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.