Изменить изображение при наведении мыши на div

Question

У меня есть базовая c карта.

Я хочу, чтобы изображение изменило 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} />
}