Reactjs 如何检查用户是否在当前组件内单击？

我有一个名为

Dialog

的组件，在该组件中，当鼠标单击

窗口

对象时，我会附加一个事件侦听器

componentDidMount() {
    document.addEventListener('click', this.handleClick);
}

componentWillUnmount() {
    document.removeEventListener('click', this.handleClick);
}

如何检测（在

handleClick

函数中）组件内部或外部是否触发了单击？请注意，此对话框包含不同的元素和子组件。

parent。contains（child）

是您的朋友。这个使用

refs

的解决方案可能并不完美，但是简单地使用

这个

是不可行的，因为它不是一个合适的DOM节点。我在这里使用的是React 15，所以请记住，在早期版本中，您必须在父级上使用

.getDOMNode（）

类对话框扩展了React.Component{
构造函数（）{
超级（）；
this.handleClick=this.handleClick.bind（this）；
}
componentDidMount（）{
document.addEventListener（'click'，this.handleClick）；
}
组件将卸载（）{
document.removeEventListener（'click'，this.handleClick）；
}
handleClick（e）{
if（this.node.contains（e.target））{
console.log（'您在组件内部单击了'）
}否则{
console.log（'您在组件外部单击了'）
}
}
render（）{
返回(
this.node=node}>
级别0

一级。

二级。
);
}
}
ReactDOM.render（，document.getElementById（'View'））

我发现了一个关于检测组件外部点击的问题。我想你可以解决问题，检测组件内部的点击。@Jackowski谢谢，我会试试的。接受的答案（作者本身）指出，他在将单击回调附加到文档体时遇到问题：“因为React的重新提交程序发生在调用文档体处理程序之前，所以未检测到元素“在”树中。”知道原因吗？谢谢！也许你猜到了，我试图把对话变成一个模态对话。然而，通过实现我意识到的代码，我完全搞砸了：如果我在对话框外单击一个元素，那么首先将执行该元素上的事件处理程序，导致重新渲染，我将丢失对话框。。。我所希望的是“handleClick”回调将具有优先权，这样，如果在对话框外单击，我就可以停止事件以进一步处理。。。我想我的想法实际上行不通。。。有什么建议吗？也许
e.preventDefault（）
有帮助，但我认为在这种情况下，您需要一种不同的方法。我相信当你搜索“react modals”时，网上有很多例子。