介绍
在 React 中，我们经常需要监听用户的鼠标点击事件，以便在用户点击组件外部时关闭浮层或菜单等组件。react-click-outside 是一个 npm 包，它提供了一种简单的方法，可以在 React 组件外部单击时触发回调函数。
安装
使用 npm 进行安装：
npm install --save react-click-outside
使用方法
基本用法
首先，将 react-click-outside 包导入你的 React 组件中：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- ----------------------
----- ----------- ------- --------------- -
------------------ - ------- -- -
-- ------
--
-------- -
------ ------- ----------------
-
-
------ ------- ----------------------------这里，我们使用 onClickOutside 高阶组件包装 MyComponent 组件，并实现 handleClickOutside 回调函数来处理单击事件。在 render 方法中，我们返回一个基本的 div 元素，这个元素是我们要渲染的组件内容。
高级用法
react-click-outside 还提供了许多高级用法和选项，以满足更复杂的需求。下面是一些示例：
禁用自动激活
默认情况下，当组件被创建时，它会立即启用 click outside 监听器。如果你希望在某些情况下禁用这个功能（例如，在组件已经关闭的情况下），你可以使用 withClickOutsideDisable 函数来包装你的组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------------- - ----------------------- - ---- ----------------------
----- ----------- ------- --------------- -
------------------ - ------- -- -
-- ------
--
-------- -
------ ------- ----------------
-
-
------ ------- -----------------------------------------------------现在，我们可以在需要禁用 click outside 监听器时使用 this.props.disableClickOutside() 方法。
自定义元素
默认情况下，react-click-outside 使用 document.documentElement 上的 click 事件监听器。如果你需要监听其他元素上的事件，可以使用 withCustomClickOutsideListener 函数来包装你的组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------------- - ------------------------------ - ---- ----------------------
----- ----------- ------- --------------- -
------------------ - ------- -- -
-- ------
--
-------- -
------ ------- ----------------
-
-
----- ----------------------- - -----------------------------------------------------------------------------------
------ ------- ----------------------------------------现在，我们将监听器绑定到了具有 ID 为 "my-element" 的 DOM 元素上。
结论
react-click-outside 是一个强大而方便的 npm 包，它使得在 React 中添加 click outside 监听器变得容易。通过使用它，我们可以更轻松地实现许多常见的用户交互效果，如浮层和菜单的关闭功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/43921