Реагировать на предотвращение всплытия событий во вложенных компонентах при нажатии
Я играл с e.preventDefault (), e.stopPropagation (), но безрезультатно.
8 ответов
Я была такая же проблема. Я обнаружил, что stopPropagation действительно работает. Я бы разделил элемент списка на отдельный компонент, вот так:
Пока вы не вызываете persist что-то, что могло бы создать значительную память для создания событий, таких как onMouseMove (и вы не создаете какую-то игру Cookie Clicker, такую как Cookies бабушки), это должно быть прекрасно!
Также обратите внимание: время от времени читая их GitHub, мы должны следить за будущими версиями React, поскольку они могут в конечном итоге решить некоторые проблемы, связанные с этим, поскольку они, похоже, собираются сделать складной код React в компиляторе / транспиляторе.
Это простой способ предотвратить переход события click к следующему компоненту, а затем вызвать ваш yourFunction.
По порядку событий DOM: ЗАХВАТ vs ЗАПУСК
Сначала происходит этап захвата, затем следует этап всплывания. Когда вы регистрируете событие с помощью обычного DOM api, события будут по умолчанию частью этапа восходящей цепочки, но это можно указать при создании события.
В React всплывающие события также используются по умолчанию.
Заглянем внутрь нашего обратного вызова handleClick (React):
Альтернатива, о которой я здесь не видел
Если вы вызываете e.preventDefault () во всех своих событиях, вы можете проверить, было ли событие уже обработано, и предотвратить его повторную обработку:
Информацию о разнице между синтетическими и собственными событиями см. В документации React: https://reactjs.org/docs/ events.html
Вы можете избежать всплытия событий, проверив цель события.
Например, если у вас есть ввод, вложенный в элемент div, где у вас есть обработчик для события щелчка, и вы не хотите его обрабатывать, при нажатии на ввод вы можете просто передать event.target в свой обработчик и проверить обработчик должен выполняться на основе свойств цели.
Например, вы можете проверить if (target.localName === «input») < return>.
Итак, это способ «избежать» выполнения обработчика
React использует делегирование событий с одним прослушивателем событий в документе для событий, которые всплывают, например «щелчок» в этом примере, что означает, что остановить распространение невозможно; реальное событие уже распространено к тому моменту, когда вы взаимодействуете с ним в React. stopPropagation в синтетическом событии React возможно, потому что React обрабатывает распространение синтетических событий внутри себя.
Русские Блоги
Система событий React Event
Реагировать на события
React стандартизирует объект события, поэтому он будет иметь одинаковые свойства в разных браузерах.
Синтаксис привязки к событию: onClick =
Функция привязки событий
Касание происходит только на мобильных устройствах
onKeyPress да onKeyDown с onKeyUp Комбинация
В соответствии с копией, вырезать и вставить мы часто используем
onChange Может использоваться в полях ввода, переключателях, выпадающих списках, мы можем получать уведомления при каждом изменении содержимого onInput Использовать при вводе текста. onSubmit Он используется для ввода ввода всей формы и часто используется для запрета работы формы по умолчанию.
Класс элементов интерфейса
Событие onScroll будет запущено при запуске события прокрутки
События, вызываемые колесом мыши, амплитуда прокрутки монитора, ориентация прокрутки
onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend onTimeUpdate onVolumeChange onWaiting
демонстрация
Пул событий
Объекты виртуальных событий были объединены. Это означает, что объект виртуального события будет повторно использован, и все свойства будут недействительными после вызова обратного вызова события. Это из соображений производительности. Следовательно, вы не можете получить доступ к событиям асинхронным способом.
Объект события
Для v0.14 возврат false в обработчике событий не предотвратит всплытие события. Вместо этого в соответствующем сценарии приложения вызовите вручную e.stopPropagation() или e.preventDefault() 。
из их e Является ли объект события target Атрибут объекта события
(Следующее содержание в скобках)
Общие атрибуты
пузырьки (логическое) указывает, является ли событие пузырьковым
cancellable (логическое) указывает, можно ли отменить событие
currentTarget (DOMEventTarget) похож на Target, потому что событие может пузыриться, поэтому содержимое, выраженное двумя, отличается
defaultPrevented (логическое) указывает, запрещает ли событие поведение по умолчанию
eventPhase (число) указывает на стадию события
protectDefault () (void), соответствующий defaultPrevented, что означает, что поведение по умолчанию запрещено
stopPropagaTion () (void) соответствует пузырькам, что означает sh
timeStamp (число) timestamp, которое является событием, вызванным событием
тип (строка) Тип события
Уникальные свойства различных объектов событий
clipboardData (DOMDataTransfer) указывает полученные данные
altKey (логическое значение) указывает, следует ли нажимать клавишу Alt.
charCode (Number) представляет код символа клавиши, вы можете судить, какая клавиша нажата кодом
ctrlKey (булево) указывает, нужно ли нажимать клавишу ctrl
getModifierState (key) (function) указывает, нажата ли вспомогательная кнопка (вспомогательная кнопка является вспомогательной кнопкой, такой как NVC ctrl и shift), и может быть передана в коде клавиши, чтобы определить, нажата ли она
клавиша (строка) строка, нажатая клавиша
keyCode (Number) означает ключи, которые не являются символьными кодами
locale (String) указывает, что некоторые строки локализованы
местоположение (число) указывает местоположение
metaKey (логическое) представляет ключ выигрыша в системе win и соответствующий ключ команды в системе mac
repeat (булево) указывает, повторяется ли клавиша
shiftKey (логическое значение) указывает, нажата ли кнопка shift
which (Number) означает charCode и keyCode после обобщения
relatedTarget (DOMEventTarget) связанный объект фокуса
screenX (Number) Начало координат находится в верхнем левом углу дисплея
screenY (Number) Начало координат находится в верхнем левом углу дисплея
Чтобы событие касания вступило в силу, вызовите его перед рендерингом всех компонентов. React.initializeTouchEvents(true) 。
changeTouches (DOMTouchList) операция жеста судьи
targetTouches (DOMTouchList) определяет операцию жеста
штрихи (DOMTouchList) операция жеста судьи
События элемента интерфейса
деталь (номер) расстояние для прокрутки
интерфейс представления (DOMAbstractView), окно
deltaMode (Number) можно понимать как единицу движения
deltaX (число) фиксированное значение относительного расстояния перемещения оси X
deltaY (Number) Фиксированное расстояние перемещения оси Y
deltaZ (Number) Фиксированное значение относительного расстояния перемещения оси Z
Примеры
Прокрутка объекта события
События и состояния
Состояние не только реализует четкое соответствие внутренних результатов компонента, но также реализует взаимодействие между компонентом и пользователем, так что поведение пользователя и компонента тесно сочетается
this.setState устанавливает состояние
Примеры
Оригинальное объяснение React
SyntheticEvent
This reference guide documents the SyntheticEvent wrapper that forms part of React’s Event System. See the Handling Events guide to learn more.
Overview
If you find that you need the underlying browser event for some reason, simply use the nativeEvent attribute to get it. Every SyntheticEvent object has the following attributes:
As of v0.14, returning false from an event handler will no longer stop event propagation. Instead, e.stopPropagation() or e.preventDefault() should be triggered manually, as appropriate.
Event Pooling
The SyntheticEvent is pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event callback has been invoked. This is for performance reasons. As such, you cannot access the event in an asynchronous way.
If you want to access the event properties in an asynchronous way, you should call event.persist() on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.
Supported Events
React normalizes events so that they have consistent properties across different browsers.
Synthetic Events in React
A persistent problem
Jun 6, 2019 · 5 min read
What are synthetic events and why do we need them?
How do events work in React?
To handle even t s, a browser’s Javascript API generally has an Event class, and every native event that triggers creates an instance of this class that gets passed as an argument to a callback function.
React, however, pools SyntheticEvent objects between all events, meaning that there is only one active SyntheticEvent object at a time. When an event is triggered, the properties of the SyntheticEvent object are set using the browser native event. The SyntheticEvent object is then passed to your callback function. Once the callback function is complete, the SyntheticEvent object will be nullified (all its properties will be reset to null ) so that it can be reused by the next event handler.
We could try to delve into why React events work this way but, essentially, this was a decision made by the React team for performance reasons, so we just have to roll with it.
An interesting side note — as well as only having one SyntheticEvent object, React only has one event listener. React employs top-level event delegation. Rather than attach an event listener to each DOM node that we specify, React creates a single, top-level event listener that can capture all native browser events. When we mount and unmount a component in which we have specified some event handling, this is just added to the internal mapping of the top-level event listener.
How can synthetic events be a problem?
Since the SyntheticEvent object is nullified once the callback function has completed, it can not be accessed asynchronously.
Here is a simple demo app to demonstrate:
This app has 2 divs:
The first says ‘I want this text’ and has an on-click event that console logs the div’s text and stores the event itself in state.
The second says ‘I don’t want this text’ and has an on-click event that logs the text of the target element of the event stored in state.
With a bit of CSS, it looks like this:
I’m storing the event in state because I want to retrieve some of its properties later. My expectation is that clicking the second div should access the event stored in state and console log the inner text of its target element: ‘I want this text’.
But this won’t work. If we want to store our event, we need to be aware that objects in Javascript are passed by reference, so all we are storing is a reference to the SyntheticEvent object. This means that the properties of the SyntheticEvent will not remain fixed. The initial problem we will encounter is that the data we might want to retrieve from the SyntheticEvent object later has been nullified.
Here we can see that clicking the first div sets the SyntheticEvent object in state. When we try to access the SyntheticEvent object through the React Developer Tools, we are bombarded with warnings. That is a warning for each property of the SyntheticEvent object, telling us that it has been nullified. As we scroll through the object, we can also see that the value of every property (except for functions) is now null.
The worse problem comes when other events trigger. Remember, the SyntheticEvent object is reused for all events and we have only stored a reference to it in state. This means that, when another event fires (for the duration of its callback) the event in our state will actually have its properties set to new values we don’t want.
Here we can see that, instead of logging the text of the first div as we’d intended, we’re getting the text of the second div. When we click on the second div, this triggers a new event whose properties React assigns to the SyntheticEvent object (including, importantly for this example, the target element). The callback function of the second div’s on-click event then looks at the event stored in state to find the inner text of its target. That target is now the second div and so it ends up logging its own inner text, rather than the text of the first div as we’d intended.
So how can we avoid this problem?
1. Cache the event data — This is the most obvious way, and you’re almost certainly already doing this anyway. Rather than save the event in state, we can pull out the data we need during the callback function and set that in state. For the demo app, that would look something like this:
2. Persist the event — If you use event.persist() during your callback function, React will maintains the SyntheticEvent object with its current properties and remove it from the pool. Instead of nullifying and reusing this SyntheticEvent object, React will create a new one to be used by any later events. We can apply that to our earlier code like so:
And now, our app should work like we wanted:
Работа с callbacks в React
За время своей работы, я периодически сталкивался с тем, что разработчики не всегда четко представляют, каким образом работает механизм передачи данных через props, в частности колбеков, и почему их PureComponents обновляется так часто.
Поэтому в данной статье мы разберемся, как передаются callbacks в React, а также обсудим особенности работы event handlers.
Часть 1. Event handlers, кеширование и восприятие кода
React представляет достаточно удобный способ добавления обработчиков событий для html элементов.
Это одна из базовых вещей, с которым знакомится любой разработчик, когда начинает писать на React:
Достаточно просто? Из этого кода сразу становится понятно, что произойдет, когда пользователь кликнет на кнопку.
Но что делать, если кода в обработчике становится все больше и больше?
Предположим, что по кнопке мы должны подгрузить и отфильтровать всех, кто не входит в определенную команду ( user.team === ‘search-team’ ), затем отсортировать их по возрасту.
В этом коде достаточно сложно разобраться. Код бизнес-логики смешивается с версткой, которую увидит пользователь.
Самый простой способ от этого избавиться: вынести функцию на уровень методов класса:
Здесь мы вынесли бизнес-логику из JSX кода в отдельное поле в нашем классе. Чтобы this был доступен внутри функции, мы определили callback таким образом: onClick= <() =>this.fetchUsers()>
Кроме того, при описании класса мы можем объявить поле как стрелочную функцию:
Это позволит нам объявлять колбек как onClick=
В чем разница этих двух способов?
onClick=
В случае с onClick= <() =>this.fetchUsers()> при каждом вызове функции render JavaScript инициализирует новую функцию () => this.fetchUsers() и сетит ее в onClick prop. Это значит, что nextProp.onClick и prop.onClick у button в этом случае всегда будут не равны, и даже если компонент будет помечен как чистый, он будет перерендерен.
Чем это грозит при разработке?
В большинстве случаев визуально вы не заметите просадки по производительности, потому что Virtual DOM, который будет сгенерирован компонентом, не будет отличаться от предыдущего, и никаких изменений в вашем DOM происходить не будет.
Однако, если вы рендерите большие списки компонентов или таблицы, то на большом объеме данных можно будет заметить «тормоза».
Почему понимание, как передается функция в колбек, важно?
Зачастую в twitter или на stackoverflow можно встретить такие советы:
«Если у вас есть проблемы с производительностью React приложения, попробуйте заменить наследование с Component на PureComponent. Также не забывайте о том, что для Component вы всегда можете определить shouldComponentUpdate, чтобы избавиться от ненужных updating циклов».
Давайте посмотрим на примере.
Создадим компонент Input, который также будет выводить информацию, сколько раз он был обновлен:
Создадим два компонента, которые будут рендерить внутри себя Input:
Попробовать пример руками можно здесь: https://codesandbox.io/s/2vwz6kjjkr
Этот пример наглядно демонстрирует, как можно потерять все преимущества PureComponent, если передавать в PureComponent каждый раз новую функцию-колбек.
Часть 2. Использование Event handlers в компонентах-функциях
В новой версии React (16.8) был анонсирован механизм React hooks, позволяющий писать полноценные функциональные компоненты, с четким lifecycle, которые могут покрыть практически все юзкейсы, которые до текущего момента покрывали только классы.
Модифицируем пример с Input component так, чтобы все компоненты были представлены функцией и работали с React-hooks.
Input должен сохранять внутри себя информацию о том, сколько раз он был изменен. Если в случае с классами мы использовали поле в нашем инстансе, доступ к которому был реализован через this, то в случае с функцией мы не сможем объявить переменную через this.
React предоставляет хук useRef, с помощью которого можно сохранять ссылку на HtmlElement в DOM дереве, но также он интересен тем, что его можно использовать для обычных данных, которые нужны нашему компоненту:
Также нам необходимо, чтобы компонент был «чистым», то есть обновлялся только в случае, если props, которые были переданы в компонент, изменились.
Для этого существуют разные библиотеки, которые предоставляют HOC, но лучше воспользоваться функцией memo, которая уже встроена в React, так как она работает быстрее и эффективнее:
Компонент Input готов, теперь перепишем компоненты A и B.
В случае с компонентом B это сделать легко:
Здесь мы воспользовались useState hook, который позволяет сохранять и работать с state компонента, в случае если компонент представлен функцией.
Каким образом мы можем закешировать функцию-колбек? Мы не можем вынести ее из компонента, так как в этом случае она будет общая для разных инстансов компонента.
Для подобных задач в React есть набор кеширующих и мемоизирующих hooks, из которых больше всего нам подойдет useCallback https://reactjs.org/docs/hooks-reference.html
Добавим в компонент A этот hook:
Мы закешировали функцию, а значит компонент Input не будет обновляться каждый раз.
Как работает useCallback hook?
Этот hook возвращает закешированную функцию (то есть ссылка не изменяется от рендера к рендеру).
Помимо функции, которую нужно кешировать, в нее передан второй аргумент — пустой массив.
Этот массив позволяет передать список полей, при изменении которых необходимо изменить функцию, т.е. вернуть новую ссылку.
Наглядно разницу между обычным способом передачи функции в колбек и useCallback можно посмотреть здесь: https://codesandbox.io/s/0y7wm3pp1w
Зачем нужен массив?
Предположим, нам нужно закешировать функцию, которая зависит от какого-то значения через замыкание:
Попробовать этот пример самому можно здесь: https://codesandbox.io/s/6vo8jny1ln
Часть 3. Syntetic events
Мы уже разобрались, как использовать event handlers и как корректно работать с замыканиями в колбеках, но в React есть еще одно очень важное отличие при работе с ними:
Создадим компонент, который внутри себя вызывает изменение состояния:
Этот код не будет работать. Дело в том, что React внутри себя проксирует события, и в наш onChange колбек попадает так называемый Syntetic Event, который после нашей функции будет «очищен» (поля будут засечены в null). React это делает из соображений производительности, чтобы использовать один объект, а не создавать каждый раз новый.
Если нам нужно взять value, как в данном примере, то достаточно закешировать нужные поля ДО выхода из функции:
Заключение:
React event handlers очень удобны, так как они:
Но вместе с тем, при разработке приложений, можно столкнуться с некоторыми трудностями:
Для правильной асинхронной работы, в случае если вам нужны данные из события, также кешируйте нужные вам поля.
React SyntheticEvent reuse
How does React manage the event system?
For performance reasons, React reuses the SyntheticEvent objects by pooling them. This means that the SyntheticEvent object is reused, so after an event handler is invoked all the properties on event.target are nullified.
“Warning: This synthetic event is reused for performance reasons”
This warning is triggered when we try to access to a React synthetic event in an asynchronous way. Because of the reuse, after the event callback has been invoked the synthetic event object will no longer exist so we cannot access its properties.
Solution 1: event.persist()
Calling event.persist() on the synthetic event removes the event from the pool allowing references to the event to be retained asynchronously.
Solution 2: cache the needed properties
We can store the event properties in the event handler and pass them to the asynchronous callback instead of accessing the event directly from the asynchronous callback:
Debouncing a synthetic event handler.
Another common example apart from setState is a debounced callback:
The debounce method from lodash creates the function which will be invoked asynchronously so if we try to access the object directly from the debounced callback, the synthetic event will be already nullified.
The example below fixes the problem by caching the event properties. In this case, we access the event value out of the debounced code and pass it to the debounced callback.
