Reagovat Události
Stejně jako události HTML DOM může React provádět akce založené na uživatelských událostech.
React má stejné události jako HTML: kliknutí, změna, přejetí myší atd.
Přidávání událostí
Události React jsou zapsány v syntaxi camelCase:
onClick
místo onclick
.
Obslužné rutiny událostí React jsou napsány ve složených závorkách:
onClick={shoot}
místo
onClick="shoot()"
.
Reagovat:
<button onClick={shoot}>Take the Shot!</button>
HTML:
<button onclick="shoot()">Take the Shot!</button>
Příklad:
Vložte shoot
funkci do
Football
komponenty:
function Football() {
const shoot = () => {
alert("Great Shot!");
}
return (
<button onClick={shoot}>Take the shot!</button>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));
Získejte certifikaci!
95 $ PŘIHLÁSIT SE
Předávání argumentů
Chcete-li předat argument obsluze události, použijte funkci šipky.
Příklad:
Poslat "Gól!" jako parametr shoot
funkce pomocí funkce šipky:
function Football() {
const shoot = (a) => {
alert(a);
}
return (
<button onClick={() => shoot("Goal!")}>Take the shot!</button>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));
Reagovat objekt události
Obslužné rutiny událostí mají přístup k události React, která spustila funkci.
V našem příkladu je událostí událost „kliknutí“.
Příklad:
Funkce šipky: Ruční odeslání objektu události:
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'));
To se bude hodit, když se podíváme na Formulář v další kapitole.