Evenementen reageren
Net als HTML DOM-gebeurtenissen, kan React acties uitvoeren op basis van gebruikersgebeurtenissen.
React heeft dezelfde events als HTML: click, change, mouseover etc.
Evenementen toevoegen
React-gebeurtenissen worden geschreven in camelCase-syntaxis:
onClick
in plaats van onclick.
React event handlers worden tussen accolades geschreven:
onClick={shoot} in plaats van
onClick="shoot()".
Reageer:
<button onClick={shoot}>Take the Shot!</button>
HTML:
<button onclick="shoot()">Take the Shot!</button>
Voorbeeld:
Zet de shootfunctie in de
Footballcomponent:
function Football() {
const shoot = () => {
alert("Great Shot!");
}
return (
<button onClick={shoot}>Take the shot!</button>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));
Gecertificeerd!
$95 INSCHRIJVEN
Argumenten doorgeven
Gebruik een pijlfunctie om een argument door te geven aan een gebeurtenishandler.
Voorbeeld:
Stuur "Doel!" als een parameter voor de shoot
functie, met behulp van de pijlfunctie:
function Football() {
const shoot = (a) => {
alert(a);
}
return (
<button onClick={() => shoot("Goal!")}>Take the shot!</button>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));
Gebeurtenisobject reageren
Event-handlers hebben toegang tot de React-gebeurtenis die de functie heeft geactiveerd.
In ons voorbeeld is de gebeurtenis de "klik" -gebeurtenis.
Voorbeeld:
Pijl Functie: Het gebeurtenisobject handmatig verzenden:
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'));
Dit komt van pas als we in een later hoofdstuk naar Formulier kijken.