如果你正在使用 React 开发 Web 应用程序并需要在外部单击时处理事件，那么 npm 包 @types/react-click-outside 可能是一个不错的选择。本文将详细介绍如何使用它，并提供一些代码示例，以帮助你更好地理解。
简介
@types/react-click-outside 是一个 TypeScript 定义文件，用于在 React 中使用 click-outside 和它的 TypeScript 类型。它提供了一个名为 ClickOutComponentClass 的高阶组件，使得在 React 中处理外部点击事件变得更加方便。
安装
如果你还没有安装 npm 包 @types/react-click-outside，请在命令行中输入以下命令：
npm install --save @types/react-click-outside
安装完成后，你就可以开始使用它了。
使用
在你的 TypeScript / JavaScript 文件中，首先导入 ClickOutComponentClass，然后在组件声明中使用它：
-- -------------------- ---- ------- ------ - ---------------------- - ---- ----------------------------- --------- ---------------- - -- ----- - --------- ---------------- - -- ----- - ----- ----------- ------- -------------------------------- - ----------------------- ----------------- - -- --------- --------- -
注意，ClickOutComponentClass 需要作为一个 mixin 使用，因此应该把它作为组件声明的一部分。此外，由于开发人员需要保留组件自己的属性和状态，因此应将 ClickOutComponentClass 与组件属性和状态合并。
现在，你可以在组件代码中使用 props.clickOutsideHandler，该属性在外部单击发生时将被调用。例如，下面的示例代码将在外部单击发生时在控制台输出一条消息：
-- -------------------- ---- -------
------ - -- ----- ---- --------
------ - ---------------------- - ---- -----------------------------
--------- ---------------- -
-- -----
-
--------- ---------------- -
-- -----
-
----- ----------- ------- -------------------------------- - ----------------------- ----------------- -
------------------ - --- ------ -- -
------------------ -----------
--
-------- -
------ ------- ----------------
-
-
------ ------- ------------------------------------以上示例代码中，我们首先实现 handleClickOutside 函数，并在其内部输出一条消息。然后，我们将此函数传递给 ClickOutComponentClass 高阶组件作为参数，并将 MyComponent 组件作为参数传递给此函数（使用默认导出）。
最后，我们导出 ClickOutComponentClass(MyComponent)，这是一个实现了 ClickOutComponentClass 的新组件。
示例
下面是一个完整的示例代码，演示了如何在 React 中使用 @types/react-click-outside 处理外部单击事件。
-- -------------------- ---- -------
------ - -- ----- ---- --------
------ ------------------------ ---- -----------------------------
-- --------- -- ----- --- --------- ---
--------- ----------------- -
-- -----
-
-- --------- -- ----- --- --------- ---
--------- ----------------- -
--------- --------
-
----- ------------ ------- --------------------------------- - ----------------------- ------------------ -
------------------ ----------------- - ----------------------- -
-------------
---------- - -
--------- -----
--
-
----------- - -- -- -
--------------- --------- -------------------- ---
--
------------------ - --- ----------- -- -
--------------- --------- ----- ---
--
-------- -
------ -
-----
---- ---------------------------
---------------------
------
-------------------- - -
-----
----- ------- -- ------
------
- - -----
------
--
-
-
------ ------- -------------------------------------在这个示例中，我们创建了一个 ClickableDiv 组件，它将在外部单击发生时处理事件。当 div 被单击时，它将呈现它的子元素，并将其状态设置为活动状态。当组件处于活动状态时，它还将呈现一个 “Click outside to cancel” 消息。
当在组件外部单击时，单击事件将传播到 ClickOutComponentClass，然后通过 handleClickOutside 函数调用传递给 ClickableDiv 组件。在 handleClickOutside 函数中，我们将 ClickableDiv 的状态设置为不活动状态，并由此取消了 div 的渲染。
结论
npm 包 @types/react-click-outside 提供了一种简单的方法来处理在 React 中处理外部单击事件。在本文中，我们通过使用 ClickOutComponentClass 高阶组件来示范了如何使用它。希望这篇文章对你有所帮助，并能帮助你更好地理解和使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc05bb5cbfe1ea0611c8d