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)) {
            //
        }
    }
}

由于在React 16中不推荐使用findDOMNode，并且在将来的版本中将其删除 - 您可以尝试的另一件事是将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

当前答案是使用respondent date_of_birth zodiac 1 1 2011-12-30 Capricorn 2 2 2012-01-30 Aquarius 3 3 2012-03-01 Pisces 4 4 2012-03-30 Aries 5 5 2012-04-30 Taurus属性。

current

如果this.node是ref响应组件，this.node.contains不起作用

2 个答案: