React 如何判断点击元素属于哪一个组件?

#1

比如我在容器外面绑定一个click事件,点击里面组件时我想在click里判断该元素属于哪一个组件,如何做?

#2

目前只能通过class来判断,还有更好地方法吗?不想依赖dom

#3

什么叫容器外…

#4

就是容器,举个例子:


<div onClick={(e)=>{
 //如何知道点击的是SubComponent
}}>
  <SubcomPonent />
</div>
#5
<div onClick={(e)=>{
 //如何知道点击的是SubComponent
e.target === findDOMNode(this.refs.xxxx)
}}>
  <SubcomPonent ref="xxxx" />
</div>
#6

谢了!

#7

啊啊啊,。。。怎么做到的,除了用import {findDOMNode} from ‘react-dom’
问题是假如我点击的是你那个

<div onClick={(e)=>{
    //如何知道点击的是SubComponent
    e.target === findDOMNode(this.refs.xxxx)
}}>
    <SubcomPonent ref="xxxx" />
        <div className="children">{‘子元素’}</div>
    </SubcomPonent>
</div>

如果说我点到了子元素怎么办,
一开始我发现点击事件下面 e.path有所有点击元素的直属父元素List列表,后来我发现这个是个bug,chrome有这个属性,但是到了firfox居然告诉我找不到e.path

#8

判断子元素可以用这个方法

function isDescendant (parent, child) {
  let node = child.parentNode

  while (node !== null) {
    if (node === parent) {
      return true
    }
    node = node.parentNode
  }

  return false
}

// =============================
isDescendant(findDOMNode(this.refs.xxxx), e.target)