javascript - 如果单击嵌套元素，请勿调用函数

我有一个带有嵌套组件的组件，像这样：

<div id="bla" onClick={() => this.handleOnClick(this.props.someParameter, this.state.someState, {id})}>
    <div class="wrapper">
    <ChildComponent />
    </div>
    ....

从技术上讲，嵌套的组件是一个图标，并且具有自己的handleOnClick函数。

如果单击子组件图标，则两个handleOnClick函数都会被调用。但是我只想调用子组件的功能。有没有办法做到这一点？

最佳答案

您应该使用event#stopPropagation。

在子组件的handleOnClick函数上，只需按以下方式调用它：

handleOnClick = function(e) {
    e.stopPropagation();
    ...rest of your code
}

我还没有反应，但这应该可以。