Question

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

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

我的事件首先发生（我想），但我试图摆脱的事情也是如此。

Answer 1

是的，这很容易做到。但是你不能按照你的方式去做。原因是因为React使用合成事件系统，将真实的DOM事件委托给文档根目录。这意味着当你使用<button onClick={this.handleClick}>Button</button>之类的东西时，React会将此事件附加到document并使用事件冒泡来处理它。

如果你了解冒泡的情况，很容易拦截这种事件。只需在委托目标之前绑定另一个处理程序并停止事件传播，因此它永远不会到达目标节点，因此永远不会处理。

基本上，事件将传播到将被处理的document节点。您希望在React应用程序的根目录中拦截事件传播（例如，它可能具有id =＆＃34; root＆＃34;）：

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'
  }
})

此处的重要部分是您需要能够识别甚至源，以便仅从必要的节点捕获事件。在上面的示例中，我使用了一些我知道按钮的类，但它取决于您。

拦截反应点击事件

1 个答案: