前言
在 React 中，我们经常需要实现一些点击元素外隐藏某个元素的功能。如何监听点击事件，又如何判断点击事件的来源，这些问题需要我们写一些繁琐的代码来解决。然而，有了 react-onclickoutside 这个 npm 包，我们就可以更加方便地实现这样的功能。
安装
使用 npm 安装 react-onclickoutside：
npm install react-onclickoutside --save
使用方法
在组件中引入 react-onclickoutside：
import onClickOutside from "react-onclickoutside";
使用 onClickOutside 包装组件：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
-------------------- -
-- ---
-
-------- -
------ ------- ----------------
-
-
------ ------- ----------------------------当点击 MyComponent 外部时，会调用 handleClickOutside 方法。
同时，我们还可以使用 this.props.disableOnClickOutside 来控制是否在组件内部点击时触发 handleClickOutside 方法：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
-------------------- -
-- ---
-
-------- -
------ -
-----
-------
---------------- -- -
------------------------
--
-
----- --
---------
------
--
-
-
------ ------- ----------------------------在这个例子中，点击按钮时不会触发 handleClickOutside 方法。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- -----------------------
----- -------- ------- --------------- -
----- - -
------- ------
--
-------------- - -- -- -
------------------------- -- --
------- ------------------
----
--
------------------ - -- -- -
---------------
------- ------
---
--
-------- -
----- - ------ - - -----------
------ -
-----
------- ------------------------------------ -----------------
------- -- -
----
---------- ------
---------- ------
---------- ------
-----
--
------
--
-
-
------ ------- -------------------------这个组件实现了一个简单的下拉菜单功能。当点击按钮时，显示下拉菜单，点击菜单外部时隐藏下拉菜单。使用了 onClickOutside 包装组件，当点击菜单外部时会触发 handleClickOutside 方法，从而隐藏下拉菜单。
总结
使用 react-onclickoutside 可以更加方便地实现点击元素外隐藏某个元素的功能。同时，通过传递 disableOnClickOutside 属性还可以控制是否在组件内部点击时触发隐藏操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/98416