[英](react,antd,card) How can I block the onclick function from action buttons with antd card component?
我点击antd卡有问题。
Antd 卡片布局这是我的 antd 卡片布局。 我通过 onclick 方法使用Card 组件控制日志。
但是当我点击1,2,3,4 区域(antd 卡片布局链接)时,它们都控制台“点击卡片”消息。 我认为这是正确的操作,因为它们位于 Card 组件中,但我想使用以下操作按钮阻止 onclick 操作。 最后,只有当我单击1,2 area时,它才应该控制台。
下面是我的卡片组件代码。
<div>
<Card
onClick={()=>console.log("clicked card")}
hoverable
cover={
bucket.imgSrc === "" ?
<img
alt="random img"
src="https://source.unsplash.com/random"
/>
:
<img
alt="bucket img"
src={bucket.imgSrc}
/>
}
actions={[
<SearchOutlined key="edit" onClick={this.popupModal}/>,
this.state.like ?
<Button icon={<HeartFilled />} type='link' key='like' onClick={this.handleDislike}> {this.state.likeCount}</Button>
:
<Button icon={<HeartOutlined />} type='link' key='dislike' onClick={this.handleLike}> {this.state.likeCount}</Button>
]}
>
<Card.Meta
avatar={<UserAvatar photoURL={bucket.userPhotoURL} />}
title={bucket.title}
description={bucket.description}
/>
</Card>
</div>
在其他事件上定义e.stopPropagation()
,例如:
actions={[
<SearchOutlined key="edit" onClick={event => { event.stopPropagation(); this.popupModal}} />
...
]}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.