如何检查用户是否在当前组件内部单击？
如何检查用户是否在当前组件内部单击？
提问于 2016-11-09 13:18:53
我有一个名为Dialog的组件，在该组件中，我在window对象上单击鼠标时附加了一个事件侦听器。
componentDidMount() {
document.addEventListener('click', this.handleClick);
}
componentWillUnmount() {
document.removeEventListener('click', this.handleClick);
}如何检测(在handleClick函数中)是否在组件内部或外部触发了单击？请注意，此对话框包含不同的元素和子组件。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-11-09 14:21:47
parent.contains(child)是你的朋友。这个使用refs的解决方案可能并不完美，但是简单地使用this是行不通的，因为它不是一个合适的DOM节点。我在这里使用的是React 15，所以请记住，在早期版本中，您必须在父级上使用.getDOMNode()。
class Dialog extends React.Component {
constructor() {
super();
this.handleClick = this.handleClick.bind(this);
}
componentDidMount() {
document.addEventListener('click', this.handleClick);
}
componentWillUnmount() {
document.removeEventListener('click', this.handleClick);
}
handleClick(e) {
if (this.node.contains(e.target)) {
console.log('You clicked INSIDE the component.')
} else {
console.log('You clicked OUTSIDE the component.')
}
}
render() {
return(
<span ref={node => this.node = node}>
Level 0<br/>
<span>
Level 1.<br/>
<span>Level 2.</span>
</span>
</span>
);
}
}
ReactDOM.render(<Dialog/>, document.getElementById('View'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="View"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40507984
复制相关文章
相似问题
腾讯云开发者
