所有子元素继承React的父div上的onclick事件

Question

这是返回部分的代码。所有的孩子元素都是无用的点击事件，当我点击它时，会给我这个孩子元素的对象而不是父对象。

return (
    <div className={css(style.cell)} onClick={this.props.onClickHandle}> 

     <div className={css(style.image)}> 
     <CircleImage size={50} url = {"http://www.ruralagriventures.com/wp-content/uploads/2017/05/man-team.jpg"}/> 
     </div> 

     <div className={css(style.info)}> 

     <div className={css(style.profile)}> 
      <span>{this.props.name}</span> 
      <span className={css(style.lastMessage)}>Latest Message</span> 
     </div> 

     <div className={css(style.detail)}> 
      <span>a few seconds ago</span> 
      <span className={css(style.counter)}>5</span> 
      </div> 
     </div> 
    </div> 
) 

我只想从父div，而不是子对象。通过道具 之前，我分配this.onClickHandle = this.onClickHandle.bind(this);

Answer 1

您可以使用refs，请参阅本link

onClickHandle(e){ 
    this.parentDiv //parent object 
} 

return (
    <div ref={(parentDiv) => { this.parentDiv = parentDiv; }} className={css(style.cell)} onClick={this.props.onClickHandle}> 

     <div className={css(style.image)}> 
     <CircleImage size={50} url = {"http://www.ruralagriventures.com/wp-content/uploads/2017/05/man-team.jpg"}/> 
     </div> 

     <div className={css(style.info)}> 

     <div className={css(style.profile)}> 
      <span>{this.props.name}</span> 
      <span className={css(style.lastMessage)}>Latest Message</span> 
     </div> 

     <div className={css(style.detail)}> 
      <span>a few seconds ago</span> 
      <span className={css(style.counter)}>5</span> 
      </div> 
     </div> 
    </div> 
)