javascript - (react,antd,card) 如何使用 antd 卡组件阻止操作按钮的 onclick 功能？

Question

我点击 antd 卡时遇到问题。

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

但是当我点击1,2,3,4区域(antd卡片布局链接)时，所有这些都控制台“点击卡片”消息。我认为这是正确的操作，因为它们位于 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>

Answer 1

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

actions={[
   <SearchOutlined key="edit" onClick={event => { event.stopPropagation(); this.popupModal}} />
   ...
]}