如何检测 React 组件外部的点击？

检测 React 组件外部的点击

所提出的场景涉及检测特定组件外部发生的点击事件。 jQuery 的closest() 方法通常检查点击事件目标是否以组件的 DOM 元素作为父元素，表示组件内的点击。

ES6 实现

提供的ES6 解决方案利用 useOutsideAlerter 钩子，该钩子将 ref 作为参数。在挂钩内，单击处理程序将添加到文档中。当发生单击时，将根据引用的当前元素检查目标。如果组件中不包含目标，则会显示警报。

OutsideAlerter 组件包装子内容并将挂钩应用于其容器的 ref。在容器外部单击时，会触发警报。

基于类的实现（React 16.3 之后）

在此实现中，OutsideAlerter 组件扩展了 Component 并定义了生命周期方法。 componentDidMount 和 componentWillUnmount 方法分别在文档中添加和删除单击处理程序。 handleClickOutside 方法检查组件外部的点击，必要时显示警报。

基于类的实现（React 16.3 之前）

之前使用了稍微不同的方法反应 16.3。该组件有一个 setWrapperRef 方法，用于设置包装器的引用。 handleClickOutside 方法检查组件外部的点击，必要时显示警报。

无论实现如何，这些解决方案都允许检测特定 React 组件外部的点击事件，从而增强对用户交互的控制。

以上是如何检测 React 组件外部的点击？的详细内容。更多信息请关注PHP中文网其他相关文章！