На первый взгляд может показаться, что в React используются обычные браузерные события, но это не так. React самостоятельно перехватывает все события, возникающие в DOM, и транслирует их во внутреннюю систему.
В любой обработчик события при вызове передаётся объект типа SyntheticEvent, кросс браузерный «враппер» (обёртка) над нативным объектом события. С точки зрения интерфейса он не отличается от нативного, кроме того, что работает одинаково во всех браузерах.
class Component extends React.Component {
onClick = (event) => {
console.log(event) // => SyntheticBaseEvent
console.log(event.type) // => "click"
}
// ...
}
SyntheticEvent хранит в себе оригинальный объект события и предоставляет интерфейс для доступа к его свойствам и методам. Этот интерфейс одинаков для всех браузеров, что крайне удобно с точки зрения разработки. К примеру, необходимо отменить действие по умолчанию (перезагрузку страницы) при отправке формы:
https://codepen.io/hexlet/pen/NvVXoy
Как видите, ничего необычного. В то же время в обычном HTML подобное поведение можно получить и другим способом. Для этого достаточно вернуть false из обработчика. В React такой вариант не пройдёт.
Точно так же нужно поступать при необходимости предотвратить всплытие события. Только вместо preventDefault вызывается функция stopPropagation.
В курсе JS: DOM API говорилось, что при работе с HTML предпочтительно использовать addEventListener. Одна из главных причин заключается в том, что такой способ позволяет повесить множество обработчиков, чем и пользуются многие JS-дополнения. В React такой способ работы просто не нужен, так как управление потоком событий всегда явное. Никто не может подключиться к React со стороны и навесить туда своих обработчиков.
Второй момент, который может пугать разработчиков, — это навешивание обработчиков прямо в JSX. Не лишний раз будет напомнить, что JSX — это JS-код, а не HTML. Поэтому нет никакой проблемы. Как вы увидите позже, такой код очень просто читать, потому что все находится в одном месте.
React нормализует события так, что они имеют консистентные свойства в различных браузерах. Кроме того, в формах добавляется событие onChange, которое ведёт себя в соответствии со своим названием и сильно упрощает работу.
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
