Реагировать на события
Как и события HTML DOM, React может выполнять действия на основе пользовательских событий.
React имеет те же события, что и HTML: щелчок, изменение, наведение мыши и т. д.
Добавление событий
События React записываются в синтаксисе camelCase:
onClick
вместо onclick
.
Обработчики событий React записываются внутри фигурных скобок:
onClick={shoot}
вместо
onClick="shoot()"
.
Реагировать:
<button onClick={shoot}>Take the Shot!</button>
HTML:
<button onclick="shoot()">Take the Shot!</button>
Пример:
Поместите shoot
функцию внутрь
Football
компонента:
function Football() {
const shoot = () => {
alert("Great Shot!");
}
return (
<button onClick={shoot}>Take the shot!</button>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));
Получите сертификат!
ЗАПИСАТЬСЯ НА 95 $
Передача аргументов
Чтобы передать аргумент обработчику событий, используйте функцию стрелки.
Пример:
Отправить "Гол!" в качестве параметра shoot
функции, используя функцию стрелки:
function Football() {
const shoot = (a) => {
alert(a);
}
return (
<button onClick={() => shoot("Goal!")}>Take the shot!</button>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));
Реагировать на объект события
Обработчики событий имеют доступ к событию React, вызвавшему функцию.
В нашем примере это событие «щелчок».
Пример:
Функция стрелки: Отправка объекта события вручную:
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'));
Это пригодится, когда мы рассмотрим форму в одной из последующих глав.