ReactJS-更改圖像onMouseOver不起作用

Question

我的目標是創建一個無狀態的圖像按鈕組件，當我將鼠標懸停在其上時可以更改圖像，以后可以在其他地方使用。

我當前的問題是，在調用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中使用硬編碼的圖像路徑。 最好的辦法是通過我猜想的道具設置圖像。

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以獲取更多信息；