单击子项时如何防止父命令的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()这些停止事件冒泡并结束调用它的事件的气泡。