使用 React 监听整个 dom 的点击事件的正确方法是什么？

Question

我用 react 创建了一个日历。它只是一堆lis。我希望能够单击该页面并显示 popover 以输入新约会。我知道我可以使用 react-bootstrap 并将每个 li 包装在 OverlayTrigger 中并使用它来创建我的 popover，但这将向我的 dom。

当我们过去使用 jQuery 时，我们只是将 event listener 附加到 body，然后我们可以在任何 li 上添加 popover ] 我们点击了。

没有 jQuery 有没有办法做到这一点？

Answer 1

考虑到您在某些父 ul 元素中只有一堆 li，请在父元素上绑定一个事件侦听器，但在事件处理程序中，检查触发事件的实际目标是否是 li 并据此采取行动。

<ul id="parent">
  <p>Some para</p>
  <li class="cell 1">Element 1</li>
  <li class="cell 2">Element 2</li>
  <li class="cell 3">Element 3</li>
</ul>
  <script>
    document.getElementById("parent").addEventListener("click", function(e) {
      if(e.target && e.target.nodeName == "LI") {   
          console.log("List item "+ e.target.className);
      }else{
          console.log('not a list item');
      }
    });
  </script>

这里有一个 bin 的方法:)

使用 React 监听整个 dom 的点击事件的正确方法是什么？

What would be the proper way to listen to a click event over the whole dom with React?

javascript

reactjs