Ereignisbehandlung in React

Die korrekte Methode, um Ereignisse in React zu behandeln, ist mittels der Funktion onClick={this.handleClick}. In unserem Fall, wäre das innerhalb eines Button-Elements:

<button onClick={this.handleClick}>Klick mich</button>

Hier verwenden wir die onClick-Eigenschaft, die in allen Standard-HTML-Tags verfügbar ist und erteilen ihr einen Event-Handler (handleClick).

Die {}-Klammern deuten darauf hin, dass wir einen JavaScript-Ausdruck eingeben, anstatt einen String. Auf diese Weise erlaubt React uns, direkt auf eine Methode oder Funktion zu verweisen, anstatt eine Zeichenfolge mit dem Namen der Funktion zu vergeben.

Es ist wichtig zu beachten, dass man this.handleClick verwendet und nicht this.handleClick(). Der Grund ist, dass this.handleClick eine Referenz auf die Funktion zurückgibt, während this.handleClick() die Funktion sofort aufruft.

Falsch wäre es, folgende Methoden zu verwenden:

<button onClick='handleClick()'>Klick mich</button>

Das ist nicht korrekt, weil es eine Zeichenfolge statt einer Funktionsreferenz verwendet.

<button onClick={handleClick()}>Klick mich</button>

Das ist nicht korrekt, weil es eine aufgerufene Funktion statt einer Funktionsreferenz verwendet.

<button handle='onClick'>Klick mich</button>

Das ist nicht korrekt, weil es den Event-Handler onClick fälschlicherweise als Eigenschaft handle definiert.

Ereignisse in React zu behandeln, folgt also grundsätzlich denselben Prinzipien wie das Behandeln von Ereignissen auf regulären DOM-Elementen. Allerdings gibt es einige syntaktische Unterschiede: React-Events werden camelCase benannt, anstatt klein geschrieben und anstelle des regulären JavaScript false Wertes, muss in React preventDefault explizit genannt werden, um den Standardverhalten eines Ereignisses zu blockieren.