在 div 鼠标悬停时修改图像

Question

我有一张基本卡。

当我将鼠标悬停在卡片上时，我希望图像更改其src。 当我将鼠标悬停在<img/> 标签本身时，我可以更改图像，如下所示：

<img src={item.iconUrl}
     onMouseOver={e => (e.currentTarget.src = item.iconHoverUrl)}
     onMouseOut={e => (e.currentTarget.src = item.iconHoverUrl)}
     className="mr-3 avatar-lg rounded" alt="app_icon" 
/>

但是当我超出它的范围时，我找不到任何方法来引用这张图片的src。 我尝试将src 的内容设置为一个变量并更改它在卡片鼠标悬停时的值，但这不会触发图像src 的更新，因此它也不起作用。

如果有帮助，这里是组件的代码：

<Card className="app-hover" style={{ marginTop: '10px', height: '92%', overflow: 'hidden' }}>
<CardBody className="p-3">
    <Media>
        <img src={item.iconUrl}
            onMouseOver={e => (e.currentTarget.src = item.iconHoverUrl)}
            onMouseOut={e => (e.currentTarget.src = item.iconHoverUrl)}
            className="mr-3 avatar-lg rounded" alt="app_icon" />
        <Media body>
            <Row style={{ marginLeft: '4px', marginTop: '15px' }}>
                <h5 className="mt-1 mb-0">{this.props.i18n.language === 'en' ? item.title : item.titleFR}</h5>
            </Row>
        </Media>
    </Media>
    <Row>
        <Col lg={6}>
            <Media>
                <CreditCard className="icon-dual align-self-center mr-2"></CreditCard>
                <Media body>
                    <h5 className="mt-2 pt-1  font-size-16">{this.props.i18n.language === 'en' ? 'Not Owned' : 'Non-Acquis'}</h5>
                </Media>
            </Media>
        </Col>
        <Col lg={6}>
            <Media>
                <Users className="icon-dual align-self-center mr-2"></Users>
                <Media body>
                    <h5 className="mt-2 pt-1 font-size-16">
                        {
                            item.stats ? item.stats.users : ''
                        }
                    </h5>
                </Media>
            </Media>
        </Col>

    </Row>

    <Row className="mt-2 border-top pt-2" style={{ paddingLeft: '8px', paddingRight: '8px' }}>
        <p className="text-muted">{this.props.i18n.language === 'en' ? item.shortDescription : item.shortDescriptionFR}</p>
    </Row>
</CardBody>

是否可以按照我的设置方式进行操作？从代码中您可以清楚地看到，图像是从 api 获取的，并且总是在变化，所以我不能简单地用 CSS 对动画进行硬编码。

Answer 1

您不应该尝试“直接”更改 DOM，而应该调用一个改变状态的函数并使用来自状态本身的新图标。让我用一个例子来解释：

const [icon, setIcon] = useState("");

const onMouseOver = () => setIcon("the-over-icon");

const onMouseOut = () => setIcon("the-not-over-icon");

// ...
<Card onMouseOver={onMouseOver} onMouseOut={onMouseOut}>
    <img src={icon} />
</Card>

Answer 2

我会将 img 提取到功能组件中。在 Typescript 中类似。

import React from "react";
import { useState } from "react";

interface IMyImgProps{
    iconUrl: string;
    iconHoverUrl: string;
}

export const MyImg: React.FunctionComponent<IMyImgProps> = props => {
    const [icon, setIcon] = useState(props.iconUrl);

    const onMouseOver = () => setIcon(props.iconHoverUrl);
    const onMouseOut = () => setIcon(props.iconUrl);

    return <img src={icon} onMouseOver={onMouseOver} onMouseOut={onMouseOut} />
}