我正在寻找一种方法来检测单击事件是否发生在组件之外，如本文所述。jQueryclosest（）用于查看单击事件的目标是否将dom元素作为其父元素之一。如果存在匹配项，则单击事件属于其中一个子项，因此不被视为在组件之外。
因此，在我的组件中，我想将一个单击处理程序附加到窗口。当处理程序启动时，我需要将目标与组件的dom子级进行比较。
click事件包含类似“path”的财产，它似乎保存了事件经过的dom路径。我不知道该比较什么，或者如何最好地遍历它，我想肯定有人已经把它放在了一个聪明的效用函数中。。。不
当前回答
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;
其他回答
import { useClickAway } from "react-use";
useClickAway(ref, () => console.log('OUTSIDE CLICKED'));
带钩的字体
注意：我使用的是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>
);
}
聚会晚了一点，但我在使用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
}
}
[更新]使用挂钩的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;
我从下面的文章中发现了这一点：
render（）{返回(｛this.node=节点；｝｝>切换弹出窗口｛this.state.popupVisible&&(我是个酒鬼！)});}}
这里有一篇关于这个问题的精彩文章：“处理React组件外部的点击”https://larsgraubner.com/handle-outside-clicks-react/
