Reactjs - 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();
}

工作示例：