检测鼠标在 React 组件中的点击位置

Question

在我的 React 应用程序中，我有一个侧导航栏，可以通过单击一个图标来打开和关闭。

如果导航栏打开并且用户点击导航栏外的任何地方，我仍然想关闭它。我怎么知道点击是否在导航栏之外？我面临的主要挑战是确保点击不在导航栏的子节点上。所以，像这样只检查导航是不够的：

mouseDownHandler(e) {

   var container = e.target;
   if(container !== "nav-bar") {

      // Do something...
   }
};

我还需要确保点击区域不是 nav-bar 的子区域。

Answer 1

您需要向文档元素添加一个事件侦听器（例如在导航栏组件的 componentDidMount 中）并在您的导航栏被销毁时将其删除（例如在 componentWillUnmount).

然后您需要引入一个 ref 来获取导航栏元素的句柄。

所有的事件处理部分都在这里回答：

Detecting where mouse was clicked in React component