如果this.node是对组件进行反应的引用，则this.node.contains不起作用

Question

我无法访问XYZ组件。现在，我要检测是否单击了该组件。

render () {
   return(
    <XYZ className="abc" ref={node => {this.pop = node}} /> // Note, I don't have access to XYZ component
  )}

通过阅读各种文章，我发现：

handleClickOutside(e){
    if (this.pop.contains(e.target)){
         // not clicked outside
    }
}

我得到Contains is undefined的this.pop是一个React component。如何解决呢？

Answer 1

您可以使用ReactDOM.findDOMNode来获取对DOM节点的引用-

handleClickOutside(e) {
    if(this.pop) {
        const domNode = ReactDOM.findDOMNode(this.pop)
        if(this.pop.contains(e.target)) {
            //
        }
    }
}

由于findDOMNode在React 16中已弃用，并且在以后的版本中将被删除-您可以尝试的另一种方法是将XYZ组件包装在div中，然后检查该div的单击情况。

render () {
   return(
    <div onClick={this.handleContainerClick}>
      <XYZ className="abc" ref={node => {this.pop = node}} /> // Note, I don't have access to XYZ component
    </div>
  )}
}

Answer 2

当前的答案是使用该current属性。

myRef = React.createRef();

const checkIfContains = e => {
    if (myRef.current.contains(e.target)) {
        doSomething();
    }
}

<div ref={myRef} onClick={checkIfContains} />