reactjs - 如何在鼠标悬停的情况下显示/隐藏antd卡中的额外部分？

Question

我在我的项目中使用antd卡片。react我想extra通过鼠标悬停在卡片上来显示和隐藏卡片中的内容。

这是我的卡片：

<Card
    title="My Card Title"
    extra={<Button type="link"> Download </Button>}
>
some content...
</Card>

我只想Download button在鼠标悬停卡片时显示。如何使用鼠标悬停控制extra部分的可见性antd card？

Answer 1

首先，您需要一个statefor show/hide 事件：

const [show, setShow] = useState(false);

其次，你应该做一个鼠标事件函数：

 const mouseHover = () => setShow(prev => !prev)

最后通过如下事件将此逻辑添加到您的卡片中：

<Card
    title="My Card Title"
    extra={show ? <Button type="link"> Download </Button> : null}
    onMouseEnter={mouseHover}
    onMouseLeave={mouseHover}
>
some content...
</Card>