在前端开发中，处理点击事件是常见的操作。但是有时候我们希望点击页面的其他地方时触发事件，这就需要使用到外部点击事件。而 npm 包 react-onclickout 就是解决这个问题的一个方案。
安装
要使用 react-onclickout，我们需要在项目中安装它。
可以使用 npm 在命令行中安装它：
npm install react-onclickout
使用
使用 react-onclickout 很简单，我们可以在组件中 import 然后使用它。
首先，我们需要引入它：
import onClickOut from 'react-onclickout';
然后，我们可以使用 HOC (高阶组件) 将 onClickOut 应用于组件，并在此基础上添加一些逻辑，比如关闭某个元素：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
-------------- - -- -- -
--------------- ----------- -----
-
-------- -
------ -
-----
------- ---------------
------
-
-
-
------ ------- ------------------------上面这个例子中，我们在 MyComponent 组件上使用了 onClickOut 这个 HOC ，并定义了 handleClickOut 函数，用于在组件外部的点击事件。当我们点击 MyComponent 外部时，handleClickOut 函数就会被触发，控制台就会输出 '点击 MyComponent 外部' 这个信息。
示例
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ---------- ---- -------------------
----- ----------- ------- --------- -
----- - -
-------- -----
-
--------- - -- -- -
---------------
-------- -------------------
---
-
-------------- - -- -- -
---------------
-------- -----
---
-
-------- -
----- -------- - -
--------- -----------
---- -------
------ -------
------- ---- ----- -----
-
------ -
-----
------- ---------------------------------------
------------------- --
---- -----------------
----------------
-----------------
------
-
------
-
-
-
------ ------- ------------------------在这个示例中，我们创建了一个带有“显示/隐藏”按钮和一个弹出框的组件。当点击“显示/隐藏”按钮时，我们使用 toggleBox 函数来显示或者隐藏弹出框。使用 onClickOut HOC ,我们在弹出框外面添加了一个点击事件，当我们点击页面的其他地方时，弹出框就会关闭。在 handleClickOut 函数中，我们使用 setState 方法来控制弹出框的显示状态。
使用 react-onclickout，我们可以很方便地实现外部点击事件，这对于开发交互较复杂的组件非常有用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/the-react-onclickout