Ereignisse
Was sind React-Events?
Mit Hilfe von Events kann eine Anwendung auf Benutzeraktionen reagieren. So können beim Eintreten bestimmter Events, z. B. beim Klicken auf einen Button, entsprechende Funktionen, d. h. sog. Event-Handler, ausgeführt werden. Dabei stehen in React die selben Events wie mit HTML zur Verfügung:
Funktionsweise von Events
Events und Event-Handler
Events müssen bei React mit der sog. „camelCase“-Schreibweise definiert und die auszu-führende Funktion in geschweifte Klammern gesetzt werden. Die Funktion die ausgeführt wird, wenn ein Event eintritt wird auch als Event-Handler bezeichnet:
index.html:
index.js:
Ergebnis:
Parameter
Sollen Parameter an den Event-Handler übergeben werden, muss der Event-Handler mit „bind()“ an das „this“ gebunden werden:
index.html:
index.js:
Ergebnis:
Werden stattdessen beim Event-Attribut sog. Lambda-Ausdrücke verwendet, kann die Bindung mit „bind()“ entfallen:
index.js:
Ergebnis:
Event-Objekt
Wenn ein Ereignis ausgelöst wird, wird ein ein Objekt erzeugt, das zusätzliche Informationen zum ausgelösten Ereignis enthält. Dieses Event-Objekt wird beim Verwenden von „bind()“ automatisch als letzer Parameter an den Event-Handler übergeben und kann dort ausgewertet werden:
index.html:
index.js:
Ergebnis:
Werden hingegen Lambda-Ausdrücke verwendet, so muss das Event-Objekt manuell übergeben werden
index.js:
Ergebnis:
