所有子元素繼承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> 
)