Javascript 检测React组件中鼠标单击的位置

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

如果导航栏处于打开状态，并且用户单击导航栏之外的任何位置，我仍然希望将其关闭。我如何知道点击是否在导航栏之外？我的主要挑战是确保点击不是在导航条的子节点上。因此，像这样检查导航是不够的：

mouseDownHandler(e) {

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

      // Do something...
   }
};

---

我还需要确保单击的区域不是导航栏的子项，您需要在文档元素中添加一个事件侦听器（例如在导航栏组件的

componentDidMount

中），并在导航栏被破坏时将其删除（例如在

componentWillUnmount

）

然后需要引入一个ref来获得导航条元素的句柄

此处回答了所有事件处理部分：