Zusammenfassung

In dieser Lektion hast du gelernt:

• Ein Handler steht direkt im JSX, onClick={handleClick}, und die Funktion wird innerhalb der Komponente geschrieben. Die Namen von Ereignissen beginnen mit on und stehen in camelCase: onClick, onChange.
• onClick bekommt eine Funktion, nicht ihren Aufruf. onClick={handleClick()} ruft die Funktion auf, während die Komponente gerendert wird, und Klicks bewirken dann nichts.
• Um ein Argument zu übergeben, setze den Aufruf in eine Pfeilfunktion: onClick={() => handleAbstimmen(band.name)}.
• Ein Handler mit einem Parameter bekommt das Ereignisobjekt. event.target ist das Element, an dem das Ereignis stattgefunden hat. Das onChange eines Textfelds kommt nach jeder Änderung seines Textes, und event.target.value ist der Text.
• Eine Funktion kann eine Prop sein: <BandKarte onAbstimmen={handleAbstimmen} />, und das Kind ruft sie auf: onAbstimmen(band.name). Props für Handler beginnen üblicherweise mit on, Handler-Funktionen mit handle.
• Eine Variable in einem Handler zu ändern, ändert die Seite nicht. React weiß nichts davon, und jedes Rendern führt die Funktion der Komponente wieder von oben aus.

In der nächsten Lektion, State, gibst du Komponenten ein Gedächtnis: Werte, die React zwischen den Renderings aufbewahrt und die die Seite aktualisieren, wenn sie sich ändern.

Doch zuerst eine kleine Übung: der Merch-Stand des Festivals, mit einem Warenkorb, der vorerst nur ausgibt.