Question

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

如果导航栏已打开且用户单击导航栏外的任何位置，我仍想关闭它。我怎么知道点击是否在导航栏之外？主要的挑战是确保点击不在导航栏的子节点上。因此，只检查导航是不够的：

mouseDownHandler(e) {

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

      // Do something...
   }
};

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

Answer 1

您需要向文档元素添加事件侦听器（例如，在导航栏组件的Column 11.2 12.2 statid VARCHAR2(30 CHAR) VARCHAR2(128 BYTE) type CHAR(1 CHAR) CHAR(1 BYTE) version NUMBER NUMBER flags NUMBER NUMBER c1 VARCHAR2(30 CHAR) VARCHAR2(128 BYTE) c2 VARCHAR2(30 CHAR) VARCHAR2(128 BYTE) c3 VARCHAR2(30 CHAR) VARCHAR2(128 BYTE) c4 VARCHAR2(30 CHAR) VARCHAR2(128 BYTE) c5 VARCHAR2(30 CHAR) VARCHAR2(128 BYTE) c6 - VARCHAR2(128 BYTE) n1 NUMBER NUMBER n2 NUMBER NUMBER n3 NUMBER NUMBER n4 NUMBER NUMBER n5 NUMBER NUMBER n6 NUMBER NUMBER n7 NUMBER NUMBER n8 NUMBER NUMBER n9 NUMBER NUMBER n10 NUMBER NUMBER n11 NUMBER NUMBER n12 NUMBER NUMBER n13 - NUMBER d1 DATE DATE R1 RAW(32) RAW(1000) R2 RAW(32) RAW(1000) R3 - RAW(1000) CH1 VARCHAR2(1000 CHAR) VARCHAR2(1000 BYTE) CL1 CLOB CLOB BL1 - BLOB中）并在导航栏被销毁时将其删除（例如在componentDidMount中）

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

此处回答了所有事件处理部分：Detect clicks outside of specific div and all of it's children

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

1 个答案: