ReactJS

Question

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

我目前的问题是在调用 onMouseOver 事件时无法设置 "hover" 图像。图像未显示，看起来像这样：

// 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 中。我想最好的办法是通过道具设置图像。

Answer 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 了解更多信息；

ReactJS - 更改图像 onMouseOver 不起作用

ReactJS - changing image onMouseOver does not work

javascript

onmouseover