Блог

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

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

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

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

Во-первых, вам нужно 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>