Ereignisse reagieren
Genau wie HTML-DOM-Ereignisse kann React Aktionen basierend auf Benutzerereignissen ausführen.
React hat die gleichen Events wie HTML: click, change, mouseover etc.
Ereignisse hinzufügen
Reaktionsereignisse werden in camelCase-Syntax geschrieben:
onClick
statt onclick.
React Event Handler werden in geschweiften Klammern geschrieben:
onClick={shoot} statt
onClick="shoot()".
Reagieren:
<button onClick={shoot}>Take the Shot!</button>
HTML:
<button onclick="shoot()">Take the Shot!</button>
Beispiel:
Fügen Sie die shootFunktion in die
FootballKomponente ein:
function Football() {
const shoot = () => {
alert("Great Shot!");
}
return (
<button onClick={shoot}>Take the shot!</button>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));
Zertifiziert werden!
$ 95 REGISTRIEREN
Argumente übergeben
Verwenden Sie eine Pfeilfunktion, um ein Argument an einen Ereignishandler zu übergeben.
Beispiel:
Senden Sie "Tor!" als Parameter für die shoot
Funktion mit der Pfeilfunktion:
function Football() {
const shoot = (a) => {
alert(a);
}
return (
<button onClick={() => shoot("Goal!")}>Take the shot!</button>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));
Reaktionsereignisobjekt
Ereignishandler haben Zugriff auf das React-Ereignis, das die Funktion ausgelöst hat.
In unserem Beispiel ist das Ereignis das „Klick“-Ereignis.
Beispiel:
Pfeilfunktion: Ereignisobjekt manuell senden:
function Football() {
const shoot = (a, b) => {
alert(b.type);
/*
'b' represents the React event that triggered the function,
in this case the 'click' event
*/
}
return (
<button onClick={(event) => shoot("Goal!", event)}>Take the shot!</button>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));
Dies wird sich als nützlich erweisen, wenn wir uns in einem späteren Kapitel mit Form befassen.