所有子元素都从 React 上的父 div 继承 onclick 事件答案

【问题标题】：All child elements inheriting onclick event from parent div on React所有子元素都从 React 上的父 div 继承 onclick 事件
【发布时间】：2017-07-29 09:47:05
【问题描述】：

这是我在退货部分的代码。所有子元素都在初始化单击事件，当我单击它时，它给了我该子元素的对象而不是父元素。

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);

【问题讨论】：

标签： reactjs events

【解决方案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>
)

【讨论】：