javascript - Reactjs - event.stopPropagation 不工作

Question

我有一个 Post 组件，它主要呈现一张卡片。如果帖子被点击，那么 URL 应该路由到 '/expand/'。

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

现在，我在我的 Post 组件中使用了这个 DeleteTemplate。

现在，单击 DeleteTemplate 按钮正在呈现模态框。在模式中，如果我选择 Cancel 选项，URL 将被路由到 '/expand/'，这不应该发生。

Answer 1

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

因此在您的 DeleteTemplate 呈现函数中:

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

取消处理程序如下所示:

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

工作示例: