На первый взгляд может показаться, что в React используются обычные браузерные события, но это не так. React самостоятельно перехватывает все события, возникающие в DOM, и транслирует их во внутреннюю систему.
В любой обработчик события при вызове передаётся объект типа SyntheticEvent
, кроссбраузерный "враппер" (обёртка) над нативным объектом события. Интерфейсно он не отличается от нативного, кроме того, что работает одинаково во всех браузерах.
class Component extends React.Component {
onClick = (event) => {
console.log(event); // => nullified object.
console.log(event.type); // => "click"
const eventType = event.type; // "click"
}
// ...
}
Правда, в целях оптимизации вместо порождения нового объекта на новое событие, React переиспользует старый объект. Значит код ниже работать верно не будет:
class Component extends React.Component {
onClick = (event) => {
this.setState({clickEvent: event});
}
// ...
}
Поэтому правильно сохранять в состоянии не сам объект события, а его свойства.
Как правило, само событие используется не часто. Например, при кликах обычно важен сам факт клика, а не его параметры, такие как координаты места возникновения. С другой стороны, событие нужно часто для предотвращения действия по умолчанию. Действительно, если ничего не предпринимать, то после клика страница будет перезагружена. В этом смысле ничего нового. И без React всё работает так же. Ниже правильный способ обработки такой ситуации:
See the Pen js_react_events_prevent_default by Hexlet (@hexlet) on CodePen.
В обычном HTML подобное поведение можно получить и другим способом. Для этого достаточно вернуть false
из обработчика. В React такой вариант не пройдёт.
Точно так же нужно поступать при необходимости предотвратить всплытие события. Только вместо preventDefault
вызывается функция stopPropagation
.
В курсе JS: DOM API говорилось, что при работе с HTML предпочтительно использовать addEventListener
. Одна из главных причин заключается в том, что такой способ позволяет повесить множество обработчиков, чем и пользуются многие JS-дополнения. В React такой способ работы просто не нужен, так как управление потоком событий всегда явное. Никто не может подключиться к React со стороны и навесить туда своих обработчиков.
Второй момент, который может пугать разработчиков, это навешивание обработчиков прямо в JSX. Не лишний раз будет напомнить, что JSX — это JS-код, а не HTML. Поэтому нет никакой проблемы. Как вы увидите позже, такой код очень просто читать, потому что все находится в одном месте.
React нормализует события так, что они имеют консистентные свойства в различных браузерах. Кроме того, в формах добавляется событие onChange
, которое ведёт себя в соответствии со своим названием и сильно упрощает работу.
Вам ответят команда поддержки Хекслета или другие студенты.
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Загляните в раздел «Обсуждение»:
Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
Зарегистрируйтесь или войдите в свой аккаунт