Reaguj na wydarzenia
Podobnie jak zdarzenia HTML DOM, React może wykonywać akcje na podstawie zdarzeń użytkownika.
React ma te same zdarzenia co HTML: kliknięcie, zmiana, najechanie myszą itp.
Dodawanie wydarzeń
Zdarzenia React są zapisywane w składni camelCase:
onClick
zamiast onclick.
Moduły obsługi zdarzeń React są napisane w nawiasach klamrowych:
onClick={shoot} zamiast
onClick="shoot()".
Reagować:
<button onClick={shoot}>Take the Shot!</button>
HTML:
<button onclick="shoot()">Take the Shot!</button>
Przykład:
Umieść shootfunkcję wewnątrz
Footballkomponentu:
function Football() {
const shoot = () => {
alert("Great Shot!");
}
return (
<button onClick={shoot}>Take the shot!</button>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));
Zostać certyfikowanym!
95 $ ZAPISZ
Przekazywanie argumentów
Aby przekazać argument do procedury obsługi zdarzeń, użyj funkcji strzałki.
Przykład:
Wyślij „Gol!” jako parametr shoot
funkcji za pomocą funkcji strzałki:
function Football() {
const shoot = (a) => {
alert(a);
}
return (
<button onClick={() => shoot("Goal!")}>Take the shot!</button>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));
Reaguj obiekt zdarzenia
Programy obsługi zdarzeń mają dostęp do zdarzenia React, które wywołało funkcję.
W naszym przykładzie zdarzenie to zdarzenie „klik”.
Przykład:
Funkcja strzałki: Ręczne wysyłanie obiektu zdarzenia:
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'));
Przyda się to, gdy przyjrzymy się formularzowi w następnym rozdziale.