(react,antd,card)如何通过带有antd卡组件的操作按钮阻止onclick功能?

问题描述 投票:0回答:1

我单击蚂蚁卡时遇到问题。

Antd card layout这是我的蚂蚁卡布局。我通过onclick方法使用Card component控制台日志。

但是,当我单击1,2,3,4区域

(蚂蚁卡布局链接)时,他们所有人都在操纵“被单击的卡”消息。我认为这是正确的操作,因为它们位于Card组件中,但是我想使用下面的操作按钮来阻止onclick操作。最后,只有当我单击1,2区域时,它才应该进行控制台。

下面是我的卡组件代码。

<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>
    

我点击蚂蚁卡时遇到问题。蚂蚁卡布局这是我的蚂蚁卡布局。我通过onclick方法使用Card组件来控制日志。但是,当我单击1,2,3,4区域(蚂蚁卡布局链接)时,...

javascript reactjs onclick antd clickable
1个回答
0
投票

例如,在其他事件上定义e.stopPropagation()

© www.soinside.com 2019 - 2024. All rights reserved.