在 Reactjs 中悬停时更改图像

Question

我正在练习 Reactjs，我目前正在研究图标的悬停但是我悬停的时候报错是图片无法显示这是我的代码 index.js

import React from 'react';
import '../contact/index.css';
enter code here`import {Row, Col, Image} from 'react-bootstrap';

import PhoneIcon from '../../../assets/icon/phone.png';
import EmailIcon from '../../../assets/icon/mail.png';
import LocationIcon from '../../../assets/icon/location.png';
import FBIcon from '../../../assets/icon/facebook.png';
import YoutubeIcon from '../../../assets/icon/youtube.png';
import GoogleIcon from '../../../assets/icon/google.png';
import FBHover from '../../../assets/icon/fb-hover.png';
import YoutubeHover from '../../../assets/icon/YTHover.png';
import GoogleHover from '../../../assets/icon/google-hover.png';

const Contact = () => {
    return (
      <Col className="fc-item">
        <h4 className="fc-title">Contact</h4>
        <div className="fc-description">
          <p>
            <Image className="contact-icon mail" src = {EmailIcon}/>
            gokymilktea@gmail.com
          </p>

          <p>
            <Image className="contact-icon location" src = {LocationIcon}/> 
            101B Le Huu Trac, Son Tra
          </p>

          <p>
            <Image className="contact-icon phone" src = {PhoneIcon}/> 
            (+84) 336 492 501
          </p>

          <p>
            <Image className="social-icon" src = {FBIcon}
              onMouseOver={e => (e.currentTarget.src = {FBHover})}
              onMouseOut={e => (e.currentTarget.src = {FBIcon})} 
            />
            <Image className="social-icon mg" src = {YoutubeIcon}
              onMouseOver={e => (e.currentTarget.src = {YoutubeHover})}
              onMouseOut={e => (e.currentTarget.src = {YoutubeIcon})} 
            />
            <Image className="social-icon" src = {GoogleIcon}
              onMouseOver={e => (e.currentTarget.src = {GoogleHover})}
              onMouseOut={e => (e.currentTarget.src = {GoogleIcon})} 
            />
          </p>
        </div>
      </Col>
    );
  }
  
  export default Contact

这是我悬停时的错误

我需要你的帮助，谢谢你花时间看我的问题

Answer 1

尝试通过删除不必要的括号来更改它：

onMouseOver={e => (e.currentTarget.src = {GoogleHover})}

至：

onMouseOver={e => e.currentTarget.src = GoogleHover}

在 Reactjs 中悬停时更改图像

Change image when hover in Reactjs

hover

reactjs