javascript - 如果单击嵌套元素，则不要调用函数

Question

我有一个带有嵌套组件的组件，如下所示:

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

嵌套组件在技术上是一个图标，它有自己的 handleOnClick 函数。

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

Answer 1

你应该使用 event#stopPropagation .

在你的子组件的 handleOnClick 函数上，像这样调用它:

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

我没有使用过 React，但这应该可以。