当我们需要监听用户在页面上任何地方的点击事件时，有时候我们需要使用外部点击事件。正常的点击事件只有在特定元素上发生时才会触发。react-outside-click-handler 是一个方便易用的 npm 包，它可以帮助我们在 React 应用程序中处理外部点击事件。
安装 react-outside-click-handler
你可以使用 npm 或者 yarn 安装 react-outside-click-handler。
npm install --save react-outside-click-handler
或
yarn add react-outside-click-handler
使用 react-outside-click-handler
安装好之后，我们就可以在 React 应用程序中使用 react-outside-click-handler 了。 我们需要先引入这个包：
import OutsideClickHandler from 'react-outside-click-handler';
然后，我们可以在 render 方法中使用 OutsideClickHandler 组件，包装我们需要处理外部点击事件的组件。通过 onOutsideClick 属性，我们可以设置当组件外部点击时要执行的函数：
<OutsideClickHandler onOutsideClick={() => console.log('点击了组件外部')}>
<div className="my-component">在组件内的内容</div>
</OutsideClickHandler>现在，当用户点击组件外部时，我们就可以在控制台输出 "点击了组件外部" 的信息。
示例代码
下面是一个基本的示例，演示了如何在 React 应用程序中使用 react-outside-click-handler。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------------------- ---- ------------------------------
-------- ------------- -
----- -------- -------- - ----------------
-------- ------------ -
-----------------
-
------ -
-------------------- ------------------ -- ----------------
---- ------------------------ ---------------------
------- - ----------- - ----------
------
----------------------
--
-这个组件会在用户点击组件内部时打开或者关闭。当用户点击组件外部时，组件会自动关闭。
总结
使用 react-outside-click-handler，我们可以方便地在 React 应用程序中处理外部点击事件。这个包可以使我们的代码更加简洁易读，并提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/141382