Перехват событий React Click
У меня есть собственное приложение React, которое мне нелегко модифицировать и перекомпилировать. Существует элемент div dom, к которому привязаны некоторые события щелчка мыши React. Я хочу знать, есть ли способ вставить какой-нибудь javascript, чтобы перехватить щелчок по этому элементу и перенаправить страницу на другой URL-адрес. Я попытался вызвать removeEventListener для объекта, но я думаю, что React, так сказать, твердо придерживается этого.
document.getElementsByClassName('close-builder')[0].addEventListener("click", function(){
alert("test");
});
Сначала срабатывает мое событие (я думаю), но и те, от которых я пытаюсь избавиться, тоже.
Да, это довольно просто. Какие события вы хотите перехватить? Они связаны с onClick и т. д.?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Да, это довольно просто. Однако вы не можете сделать это так, как пытались. Причина в том, что React использует систему синтетических событий с реальными событиями DOM, делегированными корню документа. Это означает, что когда вы используете что-то вроде <button onClick = {this.handleClick}>Button</button>, React присоединяет это событие к document и использует всплытие событий для его обработки.
Если вы понимаете, как происходит всплытие, такое событие очень легко перехватить. Просто привяжите другой обработчик перед целевым объектом делегата и остановите распространение события, чтобы он никогда не достигал целевого узла и, следовательно, никогда не обрабатывался.
По сути, событие будет распространяться на узел document, где оно будет обработано. Вы хотите перехватить распространение события, скажем, в корне вашего приложения React (например, у него может быть id = "root"):
document
↑
HTML
↑
BODY
↑
DIV#root ← catch event at this level
↑
BUTTON[class = "my-button" onClick = {...}]
Это могло выглядеть так:
// root is the root of your React application
const root = document.querySelector('#root') // or const root = document.body
root.addEventListener('click', (e) => {
if (target.tagName === 'BUTTON' && e.target.className === 'my-button') {
e.stopPropagation()
location.href = 'http://stackoverflow.com'
}
})
Важной частью здесь является то, что вам нужно иметь возможность идентифицировать даже источник, чтобы вы ловили события только из необходимых узлов. В приведенном выше примере я использовал какой-то класс, который, как я знаю, есть у моей кнопки, но решать вам.
Я пробовал это, и он работает, но только при первой загрузке приложения. После определенных взаимодействий с приложением мне кажется, что даже меня больше не увольняют.
лучше, если вы добавите код того, что у вас есть в данный момент, чтобы дать вам хороший ответ и помочь вам