问题描述
在 React 实现的项目中，有时候需要实现一个点击效果消失的功能，例如点击屏幕外的区域，或者点击一个按钮后弹出的浮层，需要在点击其他区域时消失。在实现这种功能时，通常会遇到以下问题：
- 如何监听点击事件？
- 如何判断点击事件发生在目标区域之外？
- 如何在点击事件发生时触发相应的函数？
本文将介绍解决这些问题的实现方式。
解决方式
监听点击事件
要监听点击事件，可以通过在页面上绑定 click 事件的方式实现。在 React 中，通常将 click 事件绑定到一个组件中，例如：
-- -------------------- ---- -------
----- ------------------ ------- --------------- -
----------- - -- -- -
-- ------
-
-------- -
------ -
---- ---------------------------
----- --
------
-
-
-判断点击事件发生在目标区域之外
判断点击事件发生在目标区域之外，可以通过监听 click 事件发生的位置，以及目标区域的位置和大小，来进行判断。在 React 中，可以通过 ref 属性来获取组件的位置和大小信息。例如：
-- -------------------- ---- -------
----- --------------------- ------- --------------- -
------------------ -
-------------
-------- - ------------------
-
------------------- -
---------------------------------- -------------------------
-
---------------------- -
------------------------------------- -------------------------
-
------------------ - ------- -- -
----- - -------- ------ - - ---------
----- ---------------- - ------ -- -------------------------------
-- ------------------ -
-- ------
-
-
-------- -
------ -
---- ---------------
---------------------
------
-
-
-在上面的代码中，componentDidMount 和 componentWillUnmount 用于使该组件可以通过 ref 属性来获取自身的位置和大小信息，并且在组件挂载和卸载时监听和取消监听 click 事件。handleClickOutside 是一个用于处理点击事件的函数，它通过 ref 属性获取组件位置和大小信息，然后判断点击事件是否发生在目标区域之外，最后触发相应的函数。
在点击事件发生时触发相应的函数
在点击事件发生时，通常需要触发一些函数来达到相应的效果，例如隐藏浮层或者重新渲染页面等。在 React 中，可以通过在点击事件发生时调用相应的函数来实现。例如：
-- -------------------- ---- -------
----- --------------------- ------- --------------- -
------------------ -
-------------
-------- - ------------------
-
------------------- -
---------------------------------- -------------------------
-
---------------------- -
------------------------------------- -------------------------
-
------------------ - ------- -- -
----- - -------- ------ - - ---------
----- ---------------- - ------ -- -------------------------------
-- ------------------ -
---------------------- -- -------------------------
-
-
-------- -
------ -
---- ---------------
---------------------
------
-
-
-在上面的代码中，onDisappear 是一个由父组件传递下来的函数，用于在点击事件发生时触发相应的操作。通过调用 this.props.onDisappear && this.props.onDisappear() 来判断函数是否存在并进行调用，从而触发相应的操作。
总结
本文介绍了在 React 中实现点击效果消失的功能时遇到的问题以及解决方式，包括如何监听点击事件、如何判断点击事件发生在目标区域之外，以及如何在点击事件发生时触发相应的函数。希望能给正在学习和实践 React 的读者提供一些帮助和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65912bceeb4cecbf2d664d05