React.js-event.stopPropagation不起作用 [英] Reactjs - event.stopPropagation not working

问题描述

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

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

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

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

解决方案

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

因此在您的 DeleteTemplate 渲染函数中:

 <按钮color ="secondary" onClick = {this.cancel}>取消</按钮> 

取消处理程序如下所示:

 取消(事件){event.stopPropagation();this.toggleModal();} 

工作示例:

I have a Post component which basically render's a card. If the post is clicked, then the URL should route to '/expand/'.

Now I have another component called DeleteTemplate which renders a button and clicking it render's a Modal.

Now, I have used this DeleteTemplate in my Post component.

Now, clicking the DeleteTemplate button is rendering the Modal. In the Modal if i select the Cancel option, the URL is getting routed to '/expand/' which shouldn't be happening.

解决方案

The click events of the buttons in your modal are bubbling up to the card. You need to add event.stopPropagation() to the onClick handlers of those buttons inside the modal.

So in your DeleteTemplate render function:

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

with the cancel handler looking like this:

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

Working example:

这篇关于React.js-event.stopPropagation不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！