在 JSX 中悬停时更改图像

Posted 2023-02-21

【中文标题】在 JSX 中悬停时更改图像

【英文标题】：Change image on hover in JSX

【发布时间】：2018-07-20 02:05:09

【问题描述】：

如何在 JSX 中更改 hover 上的图像

我正在尝试这样的事情：

<img src=require('../../../common/assets/network-inactive.png')
onMouseOver=this.src = require('../../../common/assets/network.png')
onMouseOut=this.src = require('../../../common/assets/network-inactive.png') />

【参考方案1】：

我将假设您正在 React 组件中编写此代码。如：

class Welcome extends React.Component 
  render() 
    return (
       <img src=require('../../../common/assets/network-inactive.png')
       onMouseOver=this.src = require('../../../common/assets/network.png')
       onMouseOut=this.src = require('../../../common/assets/network-inactive.png') 
       />
    );
  

在这种情况下，定位 this.src 将不起作用，因为您实际上是在课堂上寻找名为 src 的东西。例如this.src 可以找到这样的东西：

src = () => (alert("a source"))

但这不是你想要做的。您想要定位图像本身。

因此您需要输入<img /> 上下文。您可以像这样轻松地做到这一点：

 <img
    onMouseOver=e => console.log(e)
  />

您可以从那里定位currentTarget 属性等。这将进入元素的上下文。所以现在你可以这样做：

  <img
    src="img1"
    onMouseOver=e => (e.currentTarget.src = "img2")
  />

onMouseOut 也可以这样做。

您可以在其他元素上使用相同的方法，因为您肯定需要再次这样做。但要小心，因为这不是唯一的解决方案。在更大的项目中，您可能需要考虑使用商店 (Redux)，并传递道具而不是改变元素。

【讨论】：

谢谢，这正是我后来意识到的。我宁愿用 CSS 的方式来解决这个问题。是的，我在项目中使用 redux，我会实施你的建议。

不客气@new-boy-in-web-dev-business :) 我为你感到高兴。

@TypeKev 那么在哪种情况下this.src 会起作用？期待您的评论。

@hardy，对不起，我现在才看到你的回复。我有点晚了，但是在这种情况下，要在 img 上下文中完成 props 的突变，您需要编写一个名为 src 的函数，它基本上可以完成@ new-boy-in-web-dev-business 正在做的事情排队。即在你的类中有一个名为src 的函数：src = ( currentTarget: src ) => src = "img2"。这将完成同样的事情 - 将 currentTarget（即img 元素）的 src 设置为 'img2' :)

【参考方案2】：

最好是在状态下管理这个：

class App extends Component 
  state = 
    img: "https://i.vimeocdn.com/portrait/58832_300x300"
  

  render() 
    return (
      <div style=styles>
        <img
          src=this.state.img
          onMouseEnter=() => 
            this.setState(
              img: "http://www.toptipsclub.com/Images/page-img/keep-calm-and-prepare-for-a-test.png"
            )
          

          onMouseOut=() => 
            this.setState(
              img: "https://i.vimeocdn.com/portrait/58832_300x300"
            )
          
        />
      </div>
    )
  
;

https://codesandbox.io/s/5437qm907l

【讨论】：

我的是一个无状态组件（Functional Component）。

【参考方案3】：

这是一种使用功能组件和打字稿的非类方法：

interface IconProps 
  src?: string;
  srcOnHover?: string;
  alt?: string;


const Icon: React.FC<IconProps> = ( src, srcOnHover, alt ) => (
  <img
    src=src
    alt=alt
    onMouseOver=(e): void => 
      srcOnHover && (e.currentTarget.src = srcOnHover);
    
    onMouseOut=(e): void => 
      srcOnHover && (e.currentTarget.src = src || '');
    
  />
);

可以这样使用：

<Icon src="path/to/image.png" srcOnHover="path/to/hover-image.png"  />

【参考方案4】：

另一种非类方法：

import arrow from "../images/arrow.svg";
import arrowHover from "../images/arrowHover.svg";

function Arrow() 
  const [over, setOver] = useState(false);
  return (
    <div
      onMouseOver=() => setOver(true)
      onMouseOut=() => setOver(false)
    >
         <img
          src=over ? arrowHover : arrow
          
          
          
        />
    </div>   
  )

【参考方案5】：

简单的方法：

class Home 扩展 React.Component 状态 = 图标：ICON_ONE

渲染（） 返回（ this.setState(icon:ICON_TWO) onMouseOut=() => this.setState( icon: ICON_ONE ) /> )