Reageer gebeure
Net soos HTML DOM-gebeure, kan React aksies uitvoer op grond van gebruikersgebeure.
React het dieselfde gebeure as HTML: klik, verander, muis oor, ens.
Voeg gebeurtenisse by
Reageer-gebeurtenisse word in camelCase-sintaksis geskryf:
onClick
in plaas van onclick.
Reageer-gebeurtenishanteerders word binne krullerige hakies geskryf:
onClick={shoot} in plaas van
onClick="shoot()".
Reageer:
<button onClick={shoot}>Take the Shot!</button>
HTML:
<button onclick="shoot()">Take the Shot!</button>
Voorbeeld:
Plaas die shootfunksie binne die
Footballkomponent:
function Football() {
const shoot = () => {
alert("Great Shot!");
}
return (
<button onClick={shoot}>Take the shot!</button>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));
Word gesertifiseer!
$95 INSKRIF
Verbygaande argumente
Gebruik 'n pyltjiefunksie om 'n argument aan 'n gebeurtenishanteerder oor te dra.
Voorbeeld:
Stuur "Doel!" as 'n parameter vir die shoot
funksie, met behulp van pylfunksie:
function Football() {
const shoot = (a) => {
alert(a);
}
return (
<button onClick={() => shoot("Goal!")}>Take the shot!</button>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));
Reageer gebeurtenisvoorwerp
Gebeurtenishanteerders het toegang tot die React-gebeurtenis wat die funksie geaktiveer het.
In ons voorbeeld is die gebeurtenis die "klik" gebeurtenis.
Voorbeeld:
Pyltjie-funksie: Stuur die gebeurtenisvoorwerp met die hand:
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 sal handig te pas kom wanneer ons na Vorm in 'n latere hoofstuk kyk.