我正在寻找一种方法来检测单击事件是否发生在组件之外，如本文所述。jQueryclosest（）用于查看单击事件的目标是否将dom元素作为其父元素之一。如果存在匹配项，则单击事件属于其中一个子项，因此不被视为在组件之外。
因此，在我的组件中，我想将一个单击处理程序附加到窗口。当处理程序启动时，我需要将目标与组件的dom子级进行比较。
click事件包含类似“path”的财产，它似乎保存了事件经过的dom路径。我不知道该比较什么，或者如何最好地遍历它，我想肯定有人已经把它放在了一个聪明的效用函数中。。。不
您只需在主体上安装一个双击处理程序，并在此元素上安装另一个。在该元素的处理程序中，只需返回false以防止事件传播。因此，当双击发生时，如果它在元素上，它将被捕获，并且不会传播到主体上的处理程序。否则它会被身体上的处理程序抓住。
更新：如果你真的不想阻止事件传播，你只需要使用closest来检查点击是发生在你的元素还是他的一个孩子身上：
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).on('click', function(event) {
if (!$(event.target).closest('#div3').length) {
alert("outside");
}
});
</script>
</head>
<body>
<div style="background-color:blue;width:100px;height:100px;" id="div1"></div>
<div style="background-color:red;width:100px;height:100px;" id="div2"></div>
<div style="background-color:green;width:100px;height:100px;" id="div3"></div>
<div style="background-color:yellow;width:100px;height:100px;" id="div4"></div>
<div style="background-color:grey;width:100px;height:100px;" id="div5"></div>
</body>
</html>
更新：不带jQuery:
<html>
<head>
<script>
function findClosest (element, fn) {
if (!element) return undefined;
return fn(element) ? element : findClosest(element.parentElement, fn);
}
document.addEventListener("click", function(event) {
var target = findClosest(event.target, function(el) {
return el.id == 'div3'
});
if (!target) {
alert("outside");
}
}, false);
</script>
</head>
<body>
<div style="background-color:blue;width:100px;height:100px;" id="div1"></div>
<div style="background-color:red;width:100px;height:100px;" id="div2"></div>
<div style="background-color:green;width:100px;height:100px;" id="div3">
<div style="background-color:pink;width:50px;height:50px;" id="div6"></div>
</div>
<div style="background-color:yellow;width:100px;height:100px;" id="div4"></div>
<div style="background-color:grey;width:100px;height:100px;" id="div5"></div>
</body>
</html>
我在discuss.reactjs.org上找到了一个解决方案，这要感谢Ben Alpert。单击我的树中的一个组件会导致一个重新阅读程序，在更新时删除了单击的元素。由于React的重读发生在调用文档正文处理程序之前，因此元素未被检测为“在”树中。
解决方案是在应用程序根元素上添加处理程序。
主要：
window.__myapp_container = document.getElementById('app')
React.render(<App/>, window.__myapp_container)
组件：
import { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
export default class ClickListener extends Component {
static propTypes = {
children: PropTypes.node.isRequired,
onClickOutside: PropTypes.func.isRequired
}
componentDidMount () {
window.__myapp_container.addEventListener('click', this.handleDocumentClick)
}
componentWillUnmount () {
window.__myapp_container.removeEventListener('click', this.handleDocumentClick)
}
/* using fat arrow to bind to instance */
handleDocumentClick = (evt) => {
const area = ReactDOM.findDOMNode(this.refs.area);
if (!area.contains(evt.target)) {
this.props.onClickOutside(evt)
}
}
render () {
return (
<div ref='area'>
{this.props.children}
</div>
)
}
}
2021更新：
自从我添加这个响应以来，已经有一段时间了，而且由于它似乎仍然引起了一些兴趣，我想我会将它更新到更新的React版本。2021，我会这样写这个组件：
import React, { useState } from "react";
import "./DropDown.css";
export function DropDown({ options, callback }) {
const [selected, setSelected] = useState("");
const [expanded, setExpanded] = useState(false);
function expand() {
setExpanded(true);
}
function close() {
setExpanded(false);
}
function select(event) {
const value = event.target.textContent;
callback(value);
close();
setSelected(value);
}
return (
<div className="dropdown" tabIndex={0} onFocus={expand} onBlur={close} >
<div>{selected}</div>
{expanded ? (
<div className={"dropdown-options-list"}>
{options.map((O) => (
<div className={"dropdown-option"} onClick={select}>
{O}
</div>
))}
</div>
) : null}
</div>
);
}
原始答案（2016）：
以下是最适合我的解决方案，无需将事件附加到容器：
某些HTML元素可以具有所谓的“焦点”，例如输入元素。当这些元素失去焦点时，它们也会对模糊事件做出响应。
要使任何元素具有焦点的能力，只需确保其tabindex属性设置为-1以外的任何值。在常规HTML中，这是通过设置tabindex属性实现的，但在React中，必须使用tabindex（注意大写I）。
您也可以通过JavaScript使用element.setAttribute（'tabindex'，0）执行此操作
这就是我用来制作自定义下拉菜单的原因。
var DropDownMenu = React.createClass({
getInitialState: function(){
return {
expanded: false
}
},
expand: function(){
this.setState({expanded: true});
},
collapse: function(){
this.setState({expanded: false});
},
render: function(){
if(this.state.expanded){
var dropdown = ...; //the dropdown content
} else {
var dropdown = undefined;
}
return (
<div className="dropDownMenu" tabIndex="0" onBlur={ this.collapse } >
<div className="currentValue" onClick={this.expand}>
{this.props.displayValue}
</div>
{dropdown}
</div>
);
}
});
在这里尝试了许多方法之后，我决定使用github.com/Pomax/react-onclickoutside，因为它非常完整。
我通过npm安装了模块并将其导入到组件中：
import onClickOutside from 'react-onclickoutside'
然后，在组件类中，我定义了handleClickOutside方法：
handleClickOutside = () => {
console.log('onClickOutside() method called')
}
导出组件时，我将其包装在onClickOutside（）中：
export default onClickOutside(NameOfComponent)
就是这样。
这是我的方法（演示-https://jsfiddle.net/agymay93/4/):
我创建了一个名为WatchClickOutside的特殊组件，它可以像这样使用（我假设JSX语法）：
<WatchClickOutside onClickOutside={this.handleClose}>
<SomeDropdownEtc>
</WatchClickOutside>
以下是WatchClickOutside组件的代码：
import React, { Component } from 'react';
export default class WatchClickOutside extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
componentWillMount() {
document.body.addEventListener('click', this.handleClick);
}
componentWillUnmount() {
// remember to remove all events to avoid memory leaks
document.body.removeEventListener('click', this.handleClick);
}
handleClick(event) {
const {container} = this.refs; // get container that we'll wait to be clicked outside
const {onClickOutside} = this.props; // get click outside callback
const {target} = event; // get direct click event target
// if there is no proper callback - no point of checking
if (typeof onClickOutside !== 'function') {
return;
}
// if target is container - container was not clicked outside
// if container contains clicked target - click was not outside of it
if (target !== container && !container.contains(target)) {
onClickOutside(event); // clicked outside - fire callback
}
}
render() {
return (
<div ref="container">
{this.props.children}
</div>
);
}
}
对于那些需要绝对定位的人，我选择的一个简单选项是添加一个包装器组件，该组件的样式是以透明背景覆盖整个页面。然后可以在这个元素上添加一个onClick来关闭内部组件。
<div style={{
position: 'fixed',
top: '0', right: '0', bottom: '0', left: '0',
zIndex: '1000',
}} onClick={() => handleOutsideClick()} >
<Content style={{position: 'absolute'}}/>
</div>
现在，如果您在内容上添加一个单击处理程序，那么事件也将传播到上面的div，从而触发handlerOutsideClick。如果这不是您想要的行为，只需停止处理程序上的事件进程。
<Content style={{position: 'absolute'}} onClick={e => {
e.stopPropagation();
desiredFunctionCall();
}}/>
`
以下解决方案使用ES6并遵循绑定以及通过方法设置ref的最佳实践。
要将其付诸行动：
挂钩实施反应16.3后的类实现反应16.3之前的类实现
挂钩实施：
import React, { useRef, useEffect } from "react";
/**
* Hook that alerts clicks outside of the passed ref
*/
function useOutsideAlerter(ref) {
useEffect(() => {
/**
* Alert if clicked on outside of element
*/
function handleClickOutside(event) {
if (ref.current && !ref.current.contains(event.target)) {
alert("You clicked outside of me!");
}
}
// Bind the event listener
document.addEventListener("mousedown", handleClickOutside);
return () => {
// Unbind the event listener on clean up
document.removeEventListener("mousedown", handleClickOutside);
};
}, [ref]);
}
/**
* Component that alerts if you click outside of it
*/
export default function OutsideAlerter(props) {
const wrapperRef = useRef(null);
useOutsideAlerter(wrapperRef);
return <div ref={wrapperRef}>{props.children}</div>;
}
类实现：
16.3之后
import React, { Component } from "react";
/**
* Component that alerts if you click outside of it
*/
export default class OutsideAlerter extends Component {
constructor(props) {
super(props);
this.wrapperRef = React.createRef();
this.handleClickOutside = this.handleClickOutside.bind(this);
}
componentDidMount() {
document.addEventListener("mousedown", this.handleClickOutside);
}
componentWillUnmount() {
document.removeEventListener("mousedown", this.handleClickOutside);
}
/**
* Alert if clicked on outside of element
*/
handleClickOutside(event) {
if (this.wrapperRef && !this.wrapperRef.current.contains(event.target)) {
alert("You clicked outside of me!");
}
}
render() {
return <div ref={this.wrapperRef}>{this.props.children}</div>;
}
}
16.3之前
import React, { Component } from "react";
/**
* Component that alerts if you click outside of it
*/
export default class OutsideAlerter extends Component {
constructor(props) {
super(props);
this.setWrapperRef = this.setWrapperRef.bind(this);
this.handleClickOutside = this.handleClickOutside.bind(this);
}
componentDidMount() {
document.addEventListener("mousedown", this.handleClickOutside);
}
componentWillUnmount() {
document.removeEventListener("mousedown", this.handleClickOutside);
}
/**
* Set the wrapper ref
*/
setWrapperRef(node) {
this.wrapperRef = node;
}
/**
* Alert if clicked on outside of element
*/
handleClickOutside(event) {
if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
alert("You clicked outside of me!");
}
}
render() {
return <div ref={this.setWrapperRef}>{this.props.children}</div>;
}
}
我对所有其他答案最担心的是必须从根/父级向下过滤单击事件。我发现最简单的方法是简单地设置一个具有位置的同级元素：fixed，下拉列表后面的z索引1，并处理同一组件内固定元素上的单击事件。将所有内容集中到给定组件。
示例代码
#HTML
<div className="parent">
<div className={`dropdown ${this.state.open ? open : ''}`}>
...content
</div>
<div className="outer-handler" onClick={() => this.setState({open: false})}>
</div>
</div>
#SASS
.dropdown {
display: none;
position: absolute;
top: 0px;
left: 0px;
z-index: 100;
&.open {
display: block;
}
}
.outer-handler {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
z-index: 99;
display: none;
&.open {
display: block;
}
}
这里的其他答案都不适合我。我试图在模糊上隐藏一个弹出窗口，但由于内容是绝对定位的，所以即使单击内部内容，onBlur也会启动。
以下是一个对我来说行之有效的方法：
// Inside the component:
onBlur(event) {
// currentTarget refers to this component.
// relatedTarget refers to the element where the user clicked (or focused) which
// triggered this event.
// So in effect, this condition checks if the user clicked outside the component.
if (!event.currentTarget.contains(event.relatedTarget)) {
// do your thing.
}
},
希望这有帮助。
战略示例
我喜欢所提供的解决方案，这些解决方案通过围绕组件创建包装器来完成相同的任务。
由于这更多是一种行为，我想到了战略，并提出了以下建议。
我是React的新手，我需要一些帮助来保存用例中的样板
请回顾并告诉我你的想法。
ClickOutside行为
import ReactDOM from 'react-dom';
export default class ClickOutsideBehavior {
constructor({component, appContainer, onClickOutside}) {
// Can I extend the passed component's lifecycle events from here?
this.component = component;
this.appContainer = appContainer;
this.onClickOutside = onClickOutside;
}
enable() {
this.appContainer.addEventListener('click', this.handleDocumentClick);
}
disable() {
this.appContainer.removeEventListener('click', this.handleDocumentClick);
}
handleDocumentClick = (event) => {
const area = ReactDOM.findDOMNode(this.component);
if (!area.contains(event.target)) {
this.onClickOutside(event)
}
}
}
示例用法
import React, {Component} from 'react';
import {APP_CONTAINER} from '../const';
import ClickOutsideBehavior from '../ClickOutsideBehavior';
export default class AddCardControl extends Component {
constructor() {
super();
this.state = {
toggledOn: false,
text: ''
};
this.clickOutsideStrategy = new ClickOutsideBehavior({
component: this,
appContainer: APP_CONTAINER,
onClickOutside: () => this.toggleState(false)
});
}
componentDidMount () {
this.setState({toggledOn: !!this.props.toggledOn});
this.clickOutsideStrategy.enable();
}
componentWillUnmount () {
this.clickOutsideStrategy.disable();
}
toggleState(isOn) {
this.setState({toggledOn: isOn});
}
render() {...}
}
笔记
我想到了存储传递的组件生命周期挂钩，并用类似的方法覆盖它们：
const baseDidMount = component.componentDidMount;
component.componentDidMount = () => {
this.enable();
baseDidMount.call(component)
}
component是传递给ClickOutsideBehavior构造函数的组件。这将从该行为的用户中删除启用/禁用样板，但看起来不太好
我被困在同一个问题上。我参加这里的聚会有点晚了，但对我来说，这是一个非常好的解决方案。希望这对其他人有帮助。您需要从react dom导入findDOMNode
import ReactDOM from 'react-dom';
// ... ✂
componentDidMount() {
document.addEventListener('click', this.handleClickOutside, true);
}
componentWillUnmount() {
document.removeEventListener('click', this.handleClickOutside, true);
}
handleClickOutside = event => {
const domNode = ReactDOM.findDOMNode(this);
if (!domNode || !domNode.contains(event.target)) {
this.setState({
visible: false
});
}
}
反应挂钩法（16.8+）
您可以创建一个名为useComponentVisible的可重用钩子。
import { useState, useEffect, useRef } from 'react';
export default function useComponentVisible(initialIsVisible) {
const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
const ref = useRef(null);
const handleClickOutside = (event) => {
if (ref.current && !ref.current.contains(event.target)) {
setIsComponentVisible(false);
}
};
useEffect(() => {
document.addEventListener('click', handleClickOutside, true);
return () => {
document.removeEventListener('click', handleClickOutside, true);
};
}, []);
return { ref, isComponentVisible, setIsComponentVisible };
}
然后在组件中添加功能以执行以下操作：
const DropDown = () => {
const { ref, isComponentVisible } = useComponentVisible(true);
return (
<div ref={ref}>
{isComponentVisible && (<p>Dropdown Component</p>)}
</div>
);
}
在这里查找codesandbox示例。
componentWillMount(){
document.addEventListener('mousedown', this.handleClickOutside)
}
handleClickOutside(event) {
if(event.path[0].id !== 'your-button'){
this.setState({showWhatever: false})
}
}
事件路径[0]是最后单击的项目
我从下面的文章中发现了这一点：
render（）{返回(｛this.node=节点；｝｝>切换弹出窗口｛this.state.popupVisible&&(我是个酒鬼！)});}}
这里有一篇关于这个问题的精彩文章：“处理React组件外部的点击”https://larsgraubner.com/handle-outside-clicks-react/
我使用了这个模块（我与作者没有关联）
npm install react-onclickout --save
const ClickOutHandler=require（'act-on-clickout'）；ExampleComponent类扩展React.Component{单击退出（e）{if（hasClass（e.target，'忽略我'））返回；alert（'用户在组件外部单击！'）；}render（）{返回(<ClickOutHandler onClickOut=｛this.onClickOut｝><div>点击我的外部</分区></ClickOutHandler>);}}
它做得很好。
我之所以这样做，部分原因是遵循了这一点，并遵循了React官方文件关于处理需要React ^16.3的参考文献。这是我在尝试了其他一些建议之后唯一有效的方法。。。
class App extends Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
componentWillMount() {
document.addEventListener("mousedown", this.handleClick, false);
}
componentWillUnmount() {
document.removeEventListener("mousedown", this.handleClick, false);
}
handleClick = e => {
/*Validating click is made inside a component*/
if ( this.inputRef.current === e.target ) {
return;
}
this.handleclickOutside();
};
handleClickOutside(){
/*code to handle what to do when clicked outside*/
}
render(){
return(
<div>
<span ref={this.inputRef} />
</div>
)
}
}
将onClick处理程序添加到顶级容器中，并在用户单击时增加状态值。将该值传递给相关组件，每当该值发生变化时，您就可以执行操作。
在本例中，每当clickCount值更改时，我们都会调用this.closeDropdown（）。
incrementClickCount方法在.app容器中激发，而不是在下拉列表中激发，因为我们使用event.stopPropagation（）来防止事件冒泡。
您的代码可能最终看起来像这样：
class App extends Component {
constructor(props) {
super(props);
this.state = {
clickCount: 0
};
}
incrementClickCount = () => {
this.setState({
clickCount: this.state.clickCount + 1
});
}
render() {
return (
<div className="app" onClick={this.incrementClickCount}>
<Dropdown clickCount={this.state.clickCount}/>
</div>
);
}
}
class Dropdown extends Component {
constructor(props) {
super(props);
this.state = {
open: false
};
}
componentDidUpdate(prevProps) {
if (this.props.clickCount !== prevProps.clickCount) {
this.closeDropdown();
}
}
toggleDropdown = event => {
event.stopPropagation();
return (this.state.open) ? this.closeDropdown() : this.openDropdown();
}
render() {
return (
<div className="dropdown" onClick={this.toggleDropdown}>
...
</div>
);
}
}
[更新]使用挂钩的React ^16.8解决方案
代码沙盒
import React, { useEffect, useRef, useState } from 'react';
const SampleComponent = () => {
const [clickedOutside, setClickedOutside] = useState(false);
const myRef = useRef();
const handleClickOutside = e => {
if (!myRef.current.contains(e.target)) {
setClickedOutside(true);
}
};
const handleClickInside = () => setClickedOutside(false);
useEffect(() => {
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
});
return (
<button ref={myRef} onClick={handleClickInside}>
{clickedOutside ? 'Bye!' : 'Hello!'}
</button>
);
};
export default SampleComponent;
反应溶液^16.3：
代码沙盒
import React, { Component } from "react";
class SampleComponent extends Component {
state = {
clickedOutside: false
};
componentDidMount() {
document.addEventListener("mousedown", this.handleClickOutside);
}
componentWillUnmount() {
document.removeEventListener("mousedown", this.handleClickOutside);
}
myRef = React.createRef();
handleClickOutside = e => {
if (!this.myRef.current.contains(e.target)) {
this.setState({ clickedOutside: true });
}
};
handleClickInside = () => this.setState({ clickedOutside: false });
render() {
return (
<button ref={this.myRef} onClick={this.handleClickInside}>
{this.state.clickedOutside ? "Bye!" : "Hello!"}
</button>
);
}
}
export default SampleComponent;
为了扩展Ben Bud给出的公认答案，如果您使用的是样式化组件，那么这样传递引用会给您一个错误，例如“this.wrapperRef.contains is not a function”。
在注释中，建议的修复方法是用div包装样式化的组件，并将ref传递到那里。尽管如此，在他们的文档中，他们已经解释了这一点的原因，以及在样式化组件中正确使用ref：
将ref属性传递给样式化组件将为您提供StyledComponent包装器的实例，但不会传递给底层DOM节点。这是由于裁判的工作方式。不可能直接在包装器上调用DOM方法，如focus。要获取对实际包装的DOM节点的引用，请将回调传递给innerRef属性。
像这样：
<StyledDiv innerRef={el => { this.el = el }} />
然后您可以在“handleClickOutside”函数中直接访问它：
handleClickOutside = e => {
if (this.el && !this.el.contains(e.target)) {
console.log('clicked outside')
}
}
这也适用于“onBlur”方法：
componentDidMount(){
this.el.focus()
}
blurHandler = () => {
console.log('clicked outside')
}
render(){
return(
<StyledDiv
onBlur={this.blurHandler}
tabIndex="0"
innerRef={el => { this.el = el }}
/>
)
}
这已经有很多答案了，但它们没有解决e.stopPropagation（）和阻止单击要关闭的元素之外的react链接的问题。
由于React有自己的人工事件处理程序，您无法将文档用作事件侦听器的基础。在这之前，您需要e.stopPropagation（），因为React使用文档本身。如果改用document.querySelector（'body'）。您可以防止点击React链接。下面是我如何实现单击外部并关闭的示例。这使用ES6和React 16.3。
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = {
isOpen: false,
};
this.insideContainer = React.createRef();
}
componentWillMount() {
document.querySelector('body').addEventListener("click", this.handleClick, false);
}
componentWillUnmount() {
document.querySelector('body').removeEventListener("click", this.handleClick, false);
}
handleClick(e) {
/* Check that we've clicked outside of the container and that it is open */
if (!this.insideContainer.current.contains(e.target) && this.state.isOpen === true) {
e.preventDefault();
e.stopPropagation();
this.setState({
isOpen: false,
})
}
};
togggleOpenHandler(e) {
e.preventDefault();
this.setState({
isOpen: !this.state.isOpen,
})
}
render(){
return(
<div>
<span ref={this.insideContainer}>
<a href="#open-container" onClick={(e) => this.togggleOpenHandler(e)}>Open me</a>
</span>
<a href="/" onClick({/* clickHandler */})>
Will not trigger a click when inside is open.
</a>
</div>
);
}
}
export default App;
要使“焦点”解决方案适用于带有事件侦听器的下拉列表，您可以使用onMouseDown事件而不是onClick来添加它们。这样，事件将启动，之后弹出窗口将关闭，如下所示：
<TogglePopupButton
onClick = { this.toggleDropup }
tabIndex = '0'
onBlur = { this.closeDropup }
/>
{ this.state.isOpenedDropup &&
<ul className = { dropupList }>
{ this.props.listItems.map((item, i) => (
<li
key = { i }
onMouseDown = { item.eventHandler }
>
{ item.itemName}
</li>
))}
</ul>
}
基于Tanner Linsley在2020年夏威夷联合会议上的精彩演讲：
使用OuterClick API
const Client = () => {
const innerRef = useOuterClick(ev => {/*event handler code on outer click*/});
return <div ref={innerRef}> Inside </div>
};
实施
function useOuterClick(callback) {
const callbackRef = useRef(); // initialize mutable ref, which stores callback
const innerRef = useRef(); // returned to client, who marks "border" element
// update cb on each render, so second useEffect has access to current value
useEffect(() => { callbackRef.current = callback; });
useEffect(() => {
document.addEventListener("click", handleClick);
return () => document.removeEventListener("click", handleClick);
function handleClick(e) {
if (innerRef.current && callbackRef.current &&
!innerRef.current.contains(e.target)
) callbackRef.current(e);
}
}, []); // no dependencies -> stable click listener
return innerRef; // convenience for client (doesn't need to init ref himself)
}
下面是一个工作示例：
/*自定义挂钩*/函数useOuterClick（回调）{const innerRef=useRef（）；const callbackRef=useRef（）；//在ref中设置当前回调，然后第二个useEffect使用它useEffect（（）=>{//useEffect包装器对于并发模式是安全的callbackRef.current=回调；});使用效果（（）=>{document.addEventListener（“单击”，handleClick）；return（）=>document.removeEventListener（“单击”，handleClick）；//从ref中读取最近的回调和innerRefdom节点函数句柄Click（e）{如果(内部参考当前&&回调参考当前&&!innerRef.current.contains（e.target）) {callbackRef.current（e）；}}}, []); // 无需回调+innerRef-depreturn innerRef；//返回参考；客户端可以省略`useRef`}/*用法*/常量客户端=（）=>{const[counter，setCounter]=useState（0）；const innerRef=useOuterClick（e=>{//调用处理程序时，计数器状态是最新的alert（`Clicked outside！Increment counter to${counter+1｝`）；设置计数器（c=>c+1）；});返回(＜div＞<p>点击外面</p＞<div id=“container”ref={innerRef}>内部，计数器：｛counter｝</div></div>);};ReactDOM.render（<Client/>，document.getElementById（“root”））；#容器｛边框：1px纯红色；填充：20px；｝<script src=“https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js“integrity=”sha256-Ef0vObdWpkMAnxp39TYSLVS/vVUokDE8CDFnx7tjY6U=“crossrorigin=”匿名“></script><script src=“https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js“integrity=”sha256-p2yuFdE8hNZsQ31Qk+s8N+Me2fL5cc6NKXOC0U9uGw=“crossrorigin=”匿名“></script><script>var｛useRef，useEffect，useCallback，useState｝=反应</script><div id=“root”></div>
要点
useOuterClick利用可变引用提供瘦客户端API包含组件（[]deps）的生命周期的稳定单击侦听器客户端可以设置回调，而无需使用callback将其记忆回调主体可以访问最新的属性和状态-没有过时的闭包值
（iOS的侧注）
iOS通常只将某些元素视为可点击的。要使外部单击有效，请选择一个不同于文档的单击侦听器-不向上包括正文。例如，在React根div上添加一个监听器，并扩展其高度，如height:100vh，以捕捉所有外部点击。来源：quicksmod.org
import ReactDOM from 'react-dom' ;
class SomeComponent {
constructor(props) {
// First, add this to your constructor
this.handleClickOutside = this.handleClickOutside.bind(this);
}
componentWillMount() {
document.addEventListener('mousedown', this.handleClickOutside, false);
}
// Unbind event on unmount to prevent leaks
componentWillUnmount() {
window.removeEventListener('mousedown', this.handleClickOutside, false);
}
handleClickOutside(event) {
if(!ReactDOM.findDOMNode(this).contains(event.path[0])){
console.log("OUTSIDE");
}
}
}
我为所有场合制定了解决方案。
你应该使用一个高阶组件来包装你想要监听的组件。
这个组件示例只有一个属性：“onClickedOutside”，它接收函数。
ClickedOutside.js
import React, { Component } from "react";
export default class ClickedOutside extends Component {
componentDidMount() {
document.addEventListener("mousedown", this.handleClickOutside);
}
componentWillUnmount() {
document.removeEventListener("mousedown", this.handleClickOutside);
}
handleClickOutside = event => {
// IF exists the Ref of the wrapped component AND his dom children doesnt have the clicked component
if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
// A props callback for the ClikedClickedOutside
this.props.onClickedOutside();
}
};
render() {
// In this piece of code I'm trying to get to the first not functional component
// Because it wouldn't work if use a functional component (like <Fade/> from react-reveal)
let firstNotFunctionalComponent = this.props.children;
while (typeof firstNotFunctionalComponent.type === "function") {
firstNotFunctionalComponent = firstNotFunctionalComponent.props.children;
}
// Here I'm cloning the element because I have to pass a new prop, the "reference"
const children = React.cloneElement(firstNotFunctionalComponent, {
ref: node => {
this.wrapperRef = node;
},
// Keeping all the old props with the new element
...firstNotFunctionalComponent.props
});
return <React.Fragment>{children}</React.Fragment>;
}
}
使用OnClickOutside Hook-反应16.8+
创建通用useOnOutsideClick函数
export const useOnOutsideClick = handleOutsideClick => {
const innerBorderRef = useRef();
const onClick = event => {
if (
innerBorderRef.current &&
!innerBorderRef.current.contains(event.target)
) {
handleOutsideClick();
}
};
useMountEffect(() => {
document.addEventListener("click", onClick, true);
return () => {
document.removeEventListener("click", onClick, true);
};
});
return { innerBorderRef };
};
const useMountEffect = fun => useEffect(fun, []);
然后在任何功能组件中使用钩子。
const OutsideClickDemo = ({ currentMode, changeContactAppMode }) => {
const [open, setOpen] = useState(false);
const { innerBorderRef } = useOnOutsideClick(() => setOpen(false));
return (
<div>
<button onClick={() => setOpen(true)}>open</button>
{open && (
<div ref={innerBorderRef}>
<SomeChild/>
</div>
)}
</div>
);
};
链接到演示
部分灵感来自于@pau1itzgerald的回答。
以上答案中没有一个对我有效，所以我最终做了如下：
从“React”导入React，｛Component｝；
/**
* Component that alerts if you click outside of it
*/
export default class OutsideAlerter extends Component {
constructor(props) {
super(props);
this.handleClickOutside = this.handleClickOutside.bind(this);
}
componentDidMount() {
document.addEventListener('mousedown', this.handleClickOutside);
}
componentWillUnmount() {
document.removeEventListener('mousedown', this.handleClickOutside);
}
/**
* Alert if clicked on outside of element
*/
handleClickOutside(event) {
if (!event.path || !event.path.filter(item => item.className=='classOfAComponent').length) {
alert('You clicked outside of me!');
}
}
render() {
return <div>{this.props.children}</div>;
}
}
OutsideAlerter.propTypes = {
children: PropTypes.element.isRequired,
};
聚会晚了一点，但我在使用React时遇到了一些问题。选择下拉菜单，因为单击的选项将不再包含在我希望在onClick被激发时单击的父项中。
我通过以下方式解决了这个问题：
componentDidMount() {
document.addEventListener('mousedown', this.onClick );
}
componentWillUnmount() {
document.removeEventListener('mousedown', this.onClick );
}
onClick = (event) => {
if(!event.path.includes(this.detectOutsideClicksDiv)) {
// Do stuff here
}
}
MUI有一个小组件来解决这个问题：https://mui.com/base/react-click-away-listener/它的重量低于1kB，支持移动、IE 11和门户网站。
如果您想使用这个功能已经存在的一个小组件（466字节gzip），那么您可以查看这个库react outclick。
该库的好处在于它还允许您检测组件外部和另一个组件内部的单击。它还支持检测其他类型的事件。
在我的DROPDOWN案例中，Ben Bud的解决方案工作得很好，但我有一个单独的切换按钮和一个onClick处理程序。因此，外部单击逻辑与单击切换按钮冲突。下面是我如何通过传递按钮的ref来解决这个问题：
import React, { useRef, useEffect, useState } from "react";
/**
* Hook that triggers onClose when clicked outside of ref and buttonRef elements
*/
function useOutsideClicker(ref, buttonRef, onOutsideClick) {
useEffect(() => {
function handleClickOutside(event) {
/* clicked on the element itself */
if (ref.current && !ref.current.contains(event.target)) {
return;
}
/* clicked on the toggle button */
if (buttonRef.current && !buttonRef.current.contains(event.target)) {
return;
}
/* If it's something else, trigger onClose */
onOutsideClick();
}
// Bind the event listener
document.addEventListener("mousedown", handleClickOutside);
return () => {
// Unbind the event listener on clean up
document.removeEventListener("mousedown", handleClickOutside);
};
}, [ref]);
}
/**
* Component that alerts if you click outside of it
*/
export default function DropdownMenu(props) {
const wrapperRef = useRef(null);
const buttonRef = useRef(null);
const [dropdownVisible, setDropdownVisible] = useState(false);
useOutsideClicker(wrapperRef, buttonRef, closeDropdown);
const toggleDropdown = () => setDropdownVisible(visible => !visible);
const closeDropdown = () => setDropdownVisible(false);
return (
<div>
<button onClick={toggleDropdown} ref={buttonRef}>Dropdown Toggler</button>
{dropdownVisible && <div ref={wrapperRef}>{props.children}</div>}
</div>
);
}
我知道这是一个老问题，但我不断遇到这个问题，我很难用简单的格式来解决这个问题。所以，如果这能让任何人的生活变得轻松一点，请使用airbnb的OutsideClickHandler。这是一个最简单的插件，无需编写自己的代码即可完成此任务。
例子：
hideresults(){
this.setState({show:false})
}
render(){
return(
<div><div onClick={() => this.setState({show:true})}>SHOW</div> {(this.state.show)? <OutsideClickHandler onOutsideClick={() =>
{this.hideresults()}} > <div className="insideclick"></div> </OutsideClickHandler> :null}</div>
)
}
import { useClickAway } from "react-use";
useClickAway(ref, () => console.log('OUTSIDE CLICKED'));
你可以用一个简单的方法来解决你的问题，我向你展示：
....
const [dropDwonStatus , setDropDownStatus] = useState(false)
const openCloseDropDown = () =>{
setDropDownStatus(prev => !prev)
}
const closeDropDown = ()=> {
if(dropDwonStatus){
setDropDownStatus(false)
}
}
.
.
.
<parent onClick={closeDropDown}>
<child onClick={openCloseDropDown} />
</parent>
这对我有用，祝你好运；）
除了.concurs之外，还可以使用最接近的方法。当您想检查单击是否在id=“apple”的元素之外时，我可以使用：
const isOutside = !e.target.closest("#apple");
这将检查单击的树上方的树中是否有任何元素的id为“apple”。我们必须否定结果！
带钩的字体
注意：我使用的是React 16.3版，带有React.createRef。对于其他版本，使用ref回调。
下拉组件：
interface DropdownProps {
...
};
export const Dropdown: React.FC<DropdownProps> () {
const ref: React.RefObject<HTMLDivElement> = React.createRef();
const handleClickOutside = (event: MouseEvent) => {
if (ref && ref !== null) {
const cur = ref.current;
if (cur && !cur.contains(event.target as Node)) {
// close all dropdowns
}
}
}
useEffect(() => {
// Bind the event listener
document.addEventListener("mousedown", handleClickOutside);
return () => {
// Unbind the event listener on clean up
document.removeEventListener("mousedown", handleClickOutside);
};
});
return (
<div ref={ref}>
...
</div>
);
}
这是最适合我制作下拉菜单的方法：
handleClick = () => {
document.getElementById("myDrop").classList.toggle("showing");
}
render() {
return (
<div className="courses">
<div class="dropdownBody">
<button onClick={this.handleClick} onBlur={this.handleClick} class="dropbtn">Dropdown</button>
<div id="myDrop" class="dropdown-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</div>
</div>
)
}
https://stackoverflow.com/a/42234988/9536897解决方案在手机上不起作用。
您可以尝试：
// returns true if the element or one of its parents has the class classname
hasSomeParentTheClass(element, classname) {
if(element.target)
element=element.target;
if (element.className&& element.className.split(" ").indexOf(classname) >= 0) return true;
return (
element.parentNode &&
this.hasSomeParentTheClass(element.parentNode, classname)
);
}
componentDidMount() {
const fthis = this;
$(window).click(function (element) {
if (!fthis.hasSomeParentTheClass(element, "myClass"))
fthis.setState({ pharmacyFocus: null });
});
}
在视图中，将className赋给特定元素。
我有一个需要有条件地将孩子插入模态的例子。像这样，贝娄。
const [view, setView] = useState(VIEWS.SomeView)
return (
<Modal onClose={onClose}>
{VIEWS.Result === view ? (
<Result onDeny={() => setView(VIEWS.Details)} />
) : VIEWS.Details === view ? (
<Details onDeny={() => setView(VIEWS.Result) /> />
) : null}
</Modal>
)
所以parent.contains（event.target）在这里不起作用，因为一旦分离了子级，parent（modal）就不再包含event.targe。
我的解决方案（到目前为止有效，没有任何问题）是这样写：
const listener = (event: MouseEvent) => {
if (parentNodeRef && !event.path.includes(parentNodeRef)) callback()
}
若父级包含已经分离的树中的元素，那个么它不会触发回调。
编辑：event.path是新的，尚未在所有浏览器中退出。请改用composedPath。
或者：
const onClickOutsideListener = () => {
alert("click outside")
document.removeEventListener("click", onClickOutsideListener)
}
...
return (
<div
onMouseLeave={() => {
document.addEventListener("click", onClickOutsideListener)
}}
>
...
</div>
我喜欢@Ben Bud的答案，但当有视觉上嵌套的元素时，contains（event.target）并不能像预期的那样工作。
因此，有时最好计算点击点是否位于元素内部。
这是我的React Hook代码。
import { useEffect } from 'react'
export function useOnClickRectOutside(ref, handler) {
useEffect(() => {
const listener = (event) => {
const targetEl = ref.current
if (targetEl) {
const clickedX = event.clientX
const clickedY = event.clientY
const rect = targetEl.getBoundingClientRect()
const targetElTop = rect.top
const targetElBottom = rect.top + rect.height
const targetElLeft = rect.left
const targetElRight = rect.left + rect.width
if (
// check X Coordinate
targetElLeft < clickedX &&
clickedX < targetElRight &&
// check Y Coordinate
targetElTop < clickedY &&
clickedY < targetElBottom
) {
return
}
// trigger event when the clickedX,Y is outside of the targetEl
handler(event)
}
}
document.addEventListener('mousedown', listener)
document.addEventListener('touchstart', listener)
return () => {
document.removeEventListener('mousedown', listener)
document.removeEventListener('touchstart', listener)
}
}, [ref, handler])
}
Ez的方式。。。（2022年更新）
创建挂钩：useOutsideClick.ts
export function useOutsideClick(ref: any, onClickOut: () => void){
useEffect(() => {
const onClick = ({target}: any) => !ref.contains(target) && onClickOut?.()
document.addEventListener("click", onClick);
return () => document.removeEventListener("click", onClick);
}, []);
}
将componentRef添加到组件并调用useOutsideClick
export function Example(){
const componentRef = useRef();
useOutsideClick(componentRef.current!, () => {
// do something here
});
return (
<div ref={componentRef as any}> My Component </div>
)
}
非侵入性方式无需添加另一个DIV EL。
注意：React可能会说findDomNode已弃用，但到目前为止，我还没有遇到任何问题
@异常：单击要忽略的类
@idException:单击时忽略的id
import React from "react"
import ReactDOM from "react-dom"
type Func1<T1, R> = (a1: T1) => R
export function closest(
el: Element,
fn: (el: Element) => boolean
): Element | undefined {
let el_: Element | null = el;
while (el_) {
if (fn(el_)) {
return el_;
}
el_ = el_.parentElement;
}
}
let instances: ClickOutside[] = []
type Props = {
idException?: string,
exceptions?: (string | Func1<MouseEvent, boolean>)[]
handleClickOutside: Func1<MouseEvent, void>
}
export default class ClickOutside extends React.Component<Props> {
static defaultProps = {
exceptions: []
};
componentDidMount() {
if (instances.length === 0) {
document.addEventListener("mousedown", this.handleAll, true)
window.parent.document.addEventListener(
"mousedown",
this.handleAll,
true
)
}
instances.push(this)
}
componentWillUnmount() {
instances.splice(instances.indexOf(this), 1)
if (instances.length === 0) {
document.removeEventListener("mousedown", this.handleAll, true)
window.parent.document.removeEventListener(
"mousedown",
this.handleAll,
true
)
}
}
handleAll = (e: MouseEvent) => {
const target: HTMLElement = e.target as HTMLElement
if (!target) return
instances.forEach(instance => {
const { exceptions, handleClickOutside: onClickOutside, idException } = instance.props as Required<Props>
let exceptionsCount = 0
if (exceptions.length > 0) {
const { functionExceptions, stringExceptions } = exceptions.reduce(
(acc, exception) => {
switch (typeof exception) {
case "function":
acc.functionExceptions.push(exception)
break
case "string":
acc.stringExceptions.push(exception)
break
}
return acc
},
{ functionExceptions: [] as Func1<MouseEvent, boolean>[], stringExceptions: [] as string[] }
)
if (functionExceptions.length > 0) {
exceptionsCount += functionExceptions.filter(
exception => exception(e) === true
).length
}
if (exceptionsCount === 0 && stringExceptions.length > 0) {
const el = closest(target, (e) => stringExceptions.some(ex => e.classList.contains(ex)))
if (el) {
exceptionsCount++
}
}
}
if (idException) {
const target = e.target as HTMLDivElement
if (document.getElementById(idException)!.contains(target)) {
exceptionsCount++
}
}
if (exceptionsCount === 0) {
// eslint-disable-next-line react/no-find-dom-node
const node = ReactDOM.findDOMNode(instance)
if (node && !node.contains(target)) {
onClickOutside(e)
}
}
})
};
render() {
return React.Children.only(this.props.children)
}
}
用法
<ClickOutside {...{ handleClickOutside: () => { alert('Clicked Outside') } }}>
<div >
<div>Breathe</div>
</div>
</ClickOutside>
所以我遇到了一个类似的问题，但在我的案例中，这里选择的答案不起作用，因为我有一个下拉菜单按钮，这是文档的一部分。因此，单击该按钮也会触发handleClickOutside函数。为了防止触发，我必须向按钮和这个添加一个新的引用！menuBtnRef.current.contents（e.target）设置为条件。如果有人像我一样面临同样的问题，我就把它留在这里。
下面是组件现在的样子：
const Component = () => {
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const menuRef = useRef(null);
const menuBtnRef = useRef(null);
const handleDropdown = (e) => {
setIsDropdownOpen(!isDropdownOpen);
}
const handleClickOutside = (e) => {
if (menuRef.current && !menuRef.current.contains(e.target) && !menuBtnRef.current.contains(e.target)) {
setIsDropdownOpen(false);
}
}
useEffect(() => {
document.addEventListener('mousedown', handleClickOutside, true);
return () => {
document.removeEventListener('mousedown', handleClickOutside, true);
};
}, []);
return (
<button ref={menuBtnRef} onClick={handleDropdown}></button>
<div ref={menuRef} className={`${isDropdownOpen ? styles.dropdownMenuOpen : ''}`}>
// ...dropdown items
</div>
)
}
这是我解决问题的方法
我从我的自定义钩子返回一个布尔值，当这个值发生变化时（如果单击在我作为参数传递的ref之外，则为true），这样我就可以用useEffect钩子捕捉到这个变化，我希望你能清楚。
下面是一个活生生的例子：codesandbox上的实时示例
import { useEffect, useRef, useState } from "react";
const useOutsideClick = (ref) => {
const [outsieClick, setOutsideClick] = useState(null);
useEffect(() => {
const handleClickOutside = (e) => {
if (!ref.current.contains(e.target)) {
setOutsideClick(true);
} else {
setOutsideClick(false);
}
setOutsideClick(null);
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [ref]);
return outsieClick;
};
export const App = () => {
const buttonRef = useRef(null);
const buttonClickedOutside = useOutsideClick(buttonRef);
useEffect(() => {
// if the the click was outside of the button
// do whatever you want
if (buttonClickedOutside) {
alert("hey you clicked outside of the button");
}
}, [buttonClickedOutside]);
return (
<div className="App">
<button ref={buttonRef}>click outside me</button>
</div>
);
}
@ford04提案的字体+简化版：
使用OuterClick API
const Client = () => {
const ref = useOuterClick<HTMLDivElement>(e => { /* Custom-event-handler */ });
return <div ref={ref}> Inside </div>
};
实施
export default function useOuterClick<T extends HTMLElement>(callback: Function) {
const callbackRef = useRef<Function>(); // initialize mutable ref, which stores callback
const innerRef = useRef<T>(null); // returned to client, who marks "border" element
// update cb on each render, so second useEffect has access to current value
useEffect(() => { callbackRef.current = callback; });
useEffect(() => {
document.addEventListener("click", _onClick);
return () => document.removeEventListener("click", _onClick);
function _onClick(e: any): void {
const clickedOutside = !(innerRef.current?.contains(e.target));
if (clickedOutside)
callbackRef.current?.(e);
}
}, []); // no dependencies -> stable click listener
return innerRef; // convenience for client (doesn't need to init ref himself)
}
我有一个类似的用例，我必须开发一个自定义下拉菜单。当用户在外面单击时，它应该自动关闭。以下是最近的React Hooks实现-
从“react”导入｛useEffect，useRef，useState｝；导出常量应用程序=（）=>{const-ref=useRef（）；const[isMenuOpen，setIsMenuOpen]=useState（false）；使用效果（（）=>{常量checkIfClickedOutside=（e）=>{//如果菜单是打开的并且点击的目标不在菜单内，//然后关闭菜单if（isMenuOpen&&ref.current&&！ref.current.contents（e.target））{setIsMenuOpen（false）；}};document.addEventListener（“mousedown”，checkIfClickedOutside）；返回（）=>{//清理事件侦听器document.removeEventListener（“mousedown”，checkIfClickedOutside）；};}，[isMenuOpen]）；返回(＜div className＝“wrapper”ref＝｛ref｝＞<按钮className=“button”onClick={（）=>setIsMenuOpen（（oldState）=>！oldState）}>单击我</按钮>｛isMenuOpen&&(<ul className=“list”><li className=“list item”>下拉选项1</li><li className=“list item”>下拉选项2</li><li className=“list item”>下拉选项3</li><li className=“list item”>下拉选项4</li></ul>)}</div>);}
只需使用mui（material ui）中的ClickAwayListener：
<ClickAwayListener onClickAway={handleClickAway}>
{children}
<ClickAwayListener >
有关更多信息，请查看：https://mui.com/base/react-click-away-listener/
带打字稿函数Tooltip（）：ReactElement{const[show，setShow]=useState（false）；const-ref=useRef<HTMLDivElement>（null）；使用效果（（）=>{函数handleClickOutside（事件：MouseEvent）：void{if（ref.current&&！ref.current.includes（event.target作为节点））{setShow（false）；}}//绑定事件侦听器document.addEventListener（'mouseown'，handleClickOutside）；返回（）=>{//清理时取消绑定事件侦听器document.removeEventListener（'usedown'，handleClickOutside）；};});返回(＜div ref＝｛ref｝＞＜/div＞) }
import React, { useState, useEffect, useRef } from "react";
const YourComponent: React.FC<ComponentProps> = (props) => {
const ref = useRef<HTMLDivElement | null>(null);
const [myState, setMyState] = useState(false);
useEffect(() => {
const listener = (event: MouseEvent) => {
// we have to add some logic to decide whether or not a click event is inside of this editor
// if user clicks on inside the div we dont want to setState
// we add ref to div to figure out whether or not a user is clicking inside this div to determine whether or not event.target is inside the div
if (
ref.current &&
event.target &&
// contains is expect other: Node | null
ref.current.contains(event.target as Node)
) {
return;
}
// if we are outside
setMyState(false);
};
// anytime user clics anywhere on the dom, that click event will bubble up into our body element
// without { capture: true } it might not work
document.addEventListener("click", listener, { capture: true });
return () => {
document.removeEventListener("click", listener, { capture: true });
};
}, []);
return (
<div ref={ref}>
....
</div>
);
};
因为对我来说！ref.current.contains（e.target）无法工作，因为ref中包含的DOM元素正在更改，我提出了一个稍微不同的解决方案：
function useClickOutside<T extends HTMLElement>(
element: T | null,
onClickOutside: () => void,
) {
useEffect(() => {
function handleClickOutside(event: MouseEvent) {
const xCoord = event.clientX;
const yCoord = event.clientY;
if (element) {
const { right, x, bottom, y } = element.getBoundingClientRect();
if (xCoord < right && xCoord > x && yCoord < bottom && yCoord > y) {
return;
}
onClickOutside();
}
}
document.addEventListener('click', handleClickOutside);
return () => {
document.removeEventListener('click', handleClickOutside);
};
}, [element, onClickOutside]);
import { RefObject, useEffect } from 'react';
const useClickOutside = <T extends HTMLElement>(ref: RefObject<T>, fn: () => void) => {
useEffect(() => {
const element = ref?.current;
function handleClickOutside(event: Event) {
if (element && !element.contains(event.target as Node | null)) {
fn();
}
}
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [ref]);
};
export default useClickOutside;
所有提出的解决方案都假设可以将事件添加到文档中，并依赖于本机方法.contains（）来区分事件是在当前组件内部还是外部触发的
ref.current.contains(event.target)
但这在React中并不总是有效的。事实上，在React中，React.createPortal API允许从一个组件中指定一个新的真实父组件，JSX在该组件中被呈现，但同时，事件冒泡被模拟为组件在声明的位置呈现（即React.cCreatePortal被调用的位置）。
这是通过将所有事件附加到应用程序根元素并在Javascript中模拟事件来实现的。
因此，在这种情况下，所提出的解决方案被打破了，因为在门户元素内部的单击，对于标准HTML来说，在当前元素之外，实际上应该像在内部一样进行处理。
所以我重写了这个问题的一个注释中提出的解决方案，并对其进行了重构以使用功能组件。这也适用于一个或多个嵌套门户。
export default function OutsideClickDetector({onOutsideClick, Component ='div', ...props} : OutsideClickDetectorProps) {
const isClickInside = useRef<boolean>(false);
const onMouseDown = () => {
isClickInside.current = true;
};
const handleBodyClick = useCallback((e) => {
if(!isClickInside.current) {
onOutsideClick?.(e);
}
isClickInside.current = false;
}, [isClickInside, onOutsideClick]);
useEffect(() => {
document.addEventListener('mousedown', handleBodyClick);
return () => document.removeEventListener('mousedown', handleBodyClick);
});
return <Component onMouseDown={onMouseDown} onMouseUp={() => isClickInside.current = false}{...props} />;
}
如果您需要typescript版本：
import React, { useRef, useEffect } from "react";
interface Props {
ref: React.MutableRefObject<any>;
}
export const useOutsideAlerter = ({ ref }: Props) => {
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (ref.current && !ref.current.contains(event.target as Node)) {
//do what ever you want
}
};
// Bind the event listener
document.addEventListener("mousedown", handleClickOutside);
return () => {
// Unbind the event listener on clean up
document.removeEventListener("mousedown", handleClickOutside);
};
}, [ref]);
};
export default useOutsideAlerter;
如果您想扩展它以关闭模态或隐藏某些内容，也可以执行以下操作：
import React, { useRef, useEffect } from "react";
interface Props {
ref: React.MutableRefObject<any>;
setter: React.Dispatch<React.SetStateAction<boolean>>;
}
export const useOutsideAlerter = ({ ref, setter }: Props) => {
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (ref.current && !ref.current.contains(event.target as Node)) {
setter(false);
}
};
// Bind the event listener
document.addEventListener("mousedown", handleClickOutside);
return () => {
// Unbind the event listener on clean up
document.removeEventListener("mousedown", handleClickOutside);
};
}, [ref, setter]);
};
export default useOutsideAlerter;
