Javascript 如何避免React组件上冲突的onclick函数

我在下面有一个组件：有两个用例，当我点击整个

div

时，一些函数被执行，当我只点击

时，一些函数被执行。 单击整个

div

和

onIconClick

单击img时

仍然不起作用，不确定我应该使用什么选择标准来区分这两次单击

---

有什么想法吗？

你可以使用

e.stopPropagation（）

。如果要使用

e.nativeEvent.stopImmediatePropagation（）

，可以在同一行中使用

onIconClick（e）{
e、 停止传播（）；
//e、 nativeEvent.stopImmediatePropagation（）；
this.props.onIconClick（）；
}

试试这个：

类父级扩展React.Component{
建造师（道具）{
超级（道具）；
this.onClick=this.onClick.bind（this）；
this.onIconClick=this.onIconClick.bind（this）；
}
onClick（）{
警报（“Parent-onClick（）”；
}
onIconClick（）{
警报（“Parent-onIconClick（）”；
}
render（）{
返回(
);
}
}
子类扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onClick=this.onClick.bind（this）；
this.onIconClick=this.onIconClick.bind（this）；
}
onClick（）{
this.props.onClick（）；
}
onIconClick（e）{
e、 停止传播（）；
this.props.onIconClick（）；
}
render（）{
让样式={
高度：“500px”，
背景颜色：“蓝色”，
paddingTop：“20px”
};
返回(
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）

为什么这些事件处理程序是在类之外定义的？我的错误，修复了它！我在哪里添加这个？
export default class List extends React.Component {
  onClick() {
    this.props.onClick();
  }
  onIconClick() {
    this.props.onIconClick();
  }
  render() {
    return (
      <div style="width:200px, height: 200px" onClick={this.onClick.bind(this)}>
        <img src="delete.png" onClick={this.onIconClick.bind(this)} />
      </div>
    );
  }
}

export default class MyApp extends React.Component {
  onClick() {
    //some execution
  }
  onIconClick() {
    //some other execution
  }
  render() {
    return (
      <List
        onClick={this.onClick.bind(this)}
        onIconClick={this.onIconClick.bind(this)}
      />
    );
  }
}

 <List onIconClick={this.onIconClick.bind(this)} onClick={this.onClick.bind(this)} />