我正在寻找一种方法来检测单击事件是否发生在组件之外，如本文所述。jQueryclosest（）用于查看单击事件的目标是否将dom元素作为其父元素之一。如果存在匹配项，则单击事件属于其中一个子项，因此不被视为在组件之外。
因此，在我的组件中，我想将一个单击处理程序附加到窗口。当处理程序启动时，我需要将目标与组件的dom子级进行比较。
click事件包含类似“path”的财产，它似乎保存了事件经过的dom路径。我不知道该比较什么，或者如何最好地遍历它，我想肯定有人已经把它放在了一个聪明的效用函数中。。。不
当前回答
我之所以这样做，部分原因是遵循了这一点，并遵循了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>
)
}
}
其他回答
您只需在主体上安装一个双击处理程序，并在此元素上安装另一个。在该元素的处理程序中，只需返回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>
为了扩展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 }}
/>
)
}
将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>
);
}
}
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>
);
};
我在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>
)
}
}
