React Події
Як і події HTML DOM, React може виконувати дії на основі подій користувача.
React має ті самі події, що й HTML: клацання, зміна, наведення курсора тощо.
Додавання подій
Події React записуються в верблюжому регістрі:
onClick замість onclick.
Обробники подій React записуються у фігурних дужках:
onClick={shoot} замість onClick="shoot()".
React:
<button onClick={shoot}>Зробіть удар!</button>
HTML:
<button onclick="shoot()">Зробіть удар!</button>
Приклад:
Помістіть функцію shoot у компонент Football:
function Football() {
const shoot = () => {
alert("Чудовий удар!");
}
return (
<button onClick={shoot}>Зробіть удар!</button>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);
Передача аргументів
Щоб передати аргумент обробнику події, використовуйте функцію зі стрілкою.
Приклад:
Надіслати "Гол!" як параметр для функції shoot використовуючи функцію стрілки:
function Football() {
const shoot = (a) => {
alert(a);
}
return (
<button onClick={() => shoot("Гол!")}>Зробіть удар!</button>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);
Об’єкт події React
Обробники подій мають доступ до події React, яка ініціювала функцію.
У нашому прикладі подією є подія "click".
Приклад:
Функція стрілки: надсилання об’єкта події вручну:
function Football() {
const shoot = (a, b) => {
alert(b.type);
/*
'b' представляє подію React, яка ініціювала функцію, в даному випадку подія 'click'
*/
}
return (
<button onClick={(event) => shoot("Гол!", event)}>Зробіть удар!</button>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);
Це стане в нагоді, коли ми розглянемо Форму в наступному розділі.
