在前端开发过程中，我们经常需要处理点击页面外部区域的操作。比如在点击弹窗外部时关闭弹窗、在点击下拉列表外部时隐藏下拉列表等等。这时就需要用到一个很方便的 npm 包叫做 hook-click-outside。
本篇文章将为大家介绍 hook-click-outside 这个 npm 包的使用方法，帮助大家更好地处理点击页面外部的操作。
安装
在使用 hook-click-outside 之前，需要先安装它。使用 npm 命令即可：
npm install hook-click-outside
使用
hook-click-outside 提供了一个 useClickOutside 函数，可以方便地监听点击页面外部的操作。下面是一个示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - --------------- - ---- ---------------------
-------- ----- -
----- ----------- ------------- - ----------------
----- --- - ------------------ -- ---------------------
------ -
-----
------- ----------- -- -----------------------------------------
---------- -- -
---- --------- ----------------
----- ------- -- ----- --
------
--
------
--
-在上面的代码中，我们首先在组件内部使用 useState 定义了一个状态变量 isVisible，表示弹出框是否可见。然后，我们使用 useClickOutside 函数创建了一个 ref 并将其作为子元素的 ref 属性传递。当用户点击弹出框区域之外的部分时，useClickOutside 函数会自动调用我们传递的回调函数 () => setIsVisible(false)，从而隐藏弹出框。
深入了解
在上面的示例代码中，我们只是简单地使用了 useClickOutside 函数来监听点击页面外部的操作。但是，实际上还有很多其他的用法和参数可以使用。下面是一些我们可以深入了解的使用方法。
空 DOM 元素
当我们在调用 useClickOutside 函数时，如果传入的参数是 null 或者 undefined，则该函数将会返回一个空 DOM 元素。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - --------------- - ---- ---------------------
-------- ----- -
----- ----------- ------------- - ----------------
----- --- - ----------------------
------ -
-----
------- ----------- -- -----------------------------------------
---------- -- -
---- --------- ----------------
----- ------- -- ----- --
------
--
------
--
-在上面的代码中，我们将 useClickOutside 函数的参数传入了 null，然后使用返回的 ref 对象设置了组件的 ref 属性。这样，useClickOutside 函数就会返回一个空 DOM 元素，用于占据页面中的一部分空间。当点击到空 DOM 元素时，传入的回调函数将会被调用。
嵌套结构
有时候，我们需要处理嵌套结构中的点击页面外部的操作。此时，我们可以使用 multiple = true 参数来实现。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - --------------- - ---- ---------------------
-------- ----- -
----- ----------- ------------- - ----------------
----- --- - ------------------ -- -
--------------------
-------------------- ----------
-- - --------- ---- ---
------ -
-----
------- ----------- -- -----------------------------------------
---- ----------------------
---- --------- ----------------
----- ------- -- ----- --
------
------
------
--
-在上面的代码中，我们传递了一个对象类型的参数作为 useClickOutside 函数的第二个参数。该参数包含了 multiple: true 属性，表示此时的监听范围包括多层嵌套结构中的组件。当点击到组件之外的区域时，传入的回调函数将会被调用。
元素排除
有时候，我们需要在一些元素内部处理点击事件，而在其他元素外部处理点击事件。此时，我们需要使用 exclude 参数来排除一些元素。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - --------------- - ---- ---------------------
-------- ----- -
----- ----------- ------------- - ----------------
----- --- - ------------------ -- -------------------- -
-------- -----------
---
------ -
-----
------- ----------- -- -----------------------------------------
---------- -- -
---- --------- ----------------
------------- -----------
------
--
------
--
-在上面的代码中，我们将 exclude 参数设置为一个字符串数组 ["button"]。这意味着，在弹出框内部点击到 button 元素时，不会触发传入的回调函数。
组件销毁
当组件销毁时，我们需要取消对页面的监听。此时，我们可以使用 useEffect 钩子函数来实现。
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ - --------------- - ---- ---------------------
-------- ----- -
----- ----------- ------------- - ----------------
----- --- - ------------------ -- ---------------------
------------ -- -
------ -- -- -
----------- -- ---------------------------------------- -- -- ----
--
-- -------
------ -
-----
------- ----------- -- -----------------------------------------
---------- -- -
---- --------- ----------------
----- ------- -- ----- --
------
--
------
--
-在上面的代码中，我们使用 useEffect 钩子函数来监听 ref 对象的变化。当 ref 对象发生变化时，我们会移除上一个监听器，然后为新的 ref 对象添加监听器。这样，不管是何时销毁组件，监听器都会被正确地移除，不会造成内存泄漏。
总结
本篇文章介绍了 hook-click-outside 这个 npm 包的使用方法和一些深入了解的技巧。希望可以帮助到大家更加方便地处理点击页面外部的操作，在前端开发工作中发挥更大的作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672e30520b171f02e1d80