ReactJS - 更改图像 onMouseOver 不起作用

Posted 2023-02-22

【中文标题】ReactJS - 更改图像 onMouseOver 不起作用

【英文标题】：ReactJS - changing image onMouseOver does not work

【发布时间】：2019-05-27 11:06:42

【问题描述】：

我的目标是创建一个无状态的图像按钮组件，当我将鼠标悬停在它上面时会更改图像，并且以后可以在其他地方使用。

我目前的问题是调用 onMouseOver 事件时无法设置“悬停”图像。图片未显示，如下所示：

// Assets
import image from '../assets/normal.png';
import imageSelected from '../assets/selected.png';

const HoverImage = () => 
  function over(e) 
    e.currentTarget.src =  imageSelected ;
  
  function out(e) 
    e.currentTarget.src =  image ;
  
  return <img src=image onMouseOver=over onMouseOut=out />;
;

export default HoverImage;

当我没有将鼠标悬停在组件上时，图像会正确显示。我做错了什么或如何改进代码以达到我的目标？

此外，我不希望将图像的路径硬编码在例如 CSS 中。我猜最好的办法是通过道具设置图像。

【参考方案1】：

只需删除imageSelected 和image 周围的，当您在这些周围插入 时，实际上您传递的是对象，而不是您的图像。

import image from '../assets/normal.png';
import imageSelected from '../assets/selected.png';

const HoverImage = () => 
  function over(e) 
    e.currentTarget.src =  imageSelected ;
 
  function out(e) 
    e.currentTarget.src =  image ;
  
    return <img src=image onMouseOver=over onMouseOut=out />;
   ;

 export default HoverImage;

对于您的第二个问题，您可以将图像作为道具传递并像这样显示它们：

 const HoverImage = props => 
 function over(e) 
  e.currentTarget.src = props.hoverImage;

 function out(e) 
   e.currentTarget.src = props.normalImage;

return <img src=props.normalImage onMouseOver=over onMouseOut=out />;
;

您可以查看此Sandboox 了解更多信息；

【讨论】：

我也想在这里留下我的演示。我会使用onMouseEnter 和onMouseLeave，因为它使切换更容易。 codesandbox.io/s/63mv86l1w 在这个SO question 中有更多的想法如何实现悬停。