将鼠标悬停在 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}