如何防止单击子级时父级的 onClick 关闭？

Question

我有这个组件代码：

const myCardItem = ({ item }) => {

    function clickItem(){
        alert('Item clicked');
    }

    function clickMe(){
        alert('Button clicked');
    }

    return (
        <div className="myCardItem" onClick={clickItem}>
            <i className="fa fa-clock-o"/>&nbsp;{item.planDate}
            <br />
            <i className="fa fa-location-arrow"/>&nbsp;{item.destination}
            <br />
            <Button bsStyle="primary" onClick={clickMe}>Click Me</Button>
        </div>
    );
}

如果我点击按钮我首先得到：

其次是：

这是有道理的，因为该按钮是 myCardItem 下的子按钮。但这不是我想要的。单击myCardItem将加载新视图，而单击按钮将打开模式对话框。两者都消失会破坏页面。

如何防止父级点击被调用？

clickMe()这并不像在...中返回 false 那么容易

Answer 1

使用event.stopPropagation()或event.stopImmediatePropagation()这些停止事件冒泡并结束调用它的事件冒泡。