javascript - 拦截 React 点击事件

问题描述

我有一个自定义的 React 应用程序，对我来说修改和重新编译并不容易。有一个 div dom 元素绑定了一些 React 鼠标单击事件。我想知道是否有一种方法可以插入一些 javascript 来拦截对该元素的点击并将页面重定向到不同的 url。我尝试在对象上调用 removeEventListener，但我认为 React 可以这么说。

document.getElementsByClassName('close-builder')[0].addEventListener("click", function(){
    alert("test");
});

我的事件首先触发（我认为），但我试图摆脱的事件也是如此。

标签： javascriptreactjs

是的，这很容易做到。但是，您不能按照您尝试的方式进行操作。原因是 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 (e.target.tagName === 'BUTTON' && e.target.className === 'my-button') {
    e.stopPropagation()
    location.href = 'http://stackoverflow.com'
  }
})

这里的重要部分是您需要能够识别偶数源，以便您仅从必要的节点捕获事件。在上面的示例中，我使用了一些我知道我的按钮具有的类，但这取决于你。

javascript - 拦截 React 点击事件

问题描述

解决方案

推荐阅读