React.js-event.stopPropagation不起作用

Question

我有一个Post组件，基本上是一张卡片。如果单击该帖子，则 URL 应该路由到'/expand/'。

现在，我有另一个名为DeleteTemplate的组件，它呈现一个按钮，单击该按钮将呈现一个 Modal 。

现在，我在DeleteTemplate组件中使用了此Post。

现在，单击DeleteTemplate按钮将渲染模式。在模式中，如果我选择Cancel选项，则 URL 会被路由到'/expand/'，这本不应该发生。

Answer 1

模态中按钮的单击事件正在冒泡至卡片。您需要将event.stopPropagation()添加到模态内这些按钮的onClick处理程序中。

因此，在您的DeleteTemplate渲染函数中：

<Button color="secondary" onClick={this.cancel}>
    CANCEL
</Button>

取消处理程序如下所示：

cancel(event) {
    event.stopPropagation();
    this.toggleModal();
}

工作示例：