Как показать / скрыть дополнительный раздел на карте antd при наведении курсора мыши?

Я использую antd карточки в своем react проекте. Я хочу отображать и скрывать extra содержимое моей карточки при наведении курсора мыши на карточку.

это моя карточка:

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

Хочу показывать Download button только при наведении курсора мыши на карту. Как я могу контролировать видимость раздела extra в antd card при наведении курсора мыши?


reactjs antd card mouseover
person Zahra Talebi    schedule 02.01.2021    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Во-первых, вам понадобится state для события показать / скрыть:

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>
person b3hr4d    schedule 02.01.2021