Change image on hover in JSX

不羁岁月 提交于 2020-08-04 05:09:09

问题


How do I change an image on hover in JSX

I'm trying something like this:

<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:


I will assume you are writing this code in a React component. Such as:

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')} 
       />
    );
  }
}

Targeting this.src will not work in this case as you are essentially looking for something named src in your class. For instance this.src could find something like this:

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

But that is not what you want to do. You want to target the image itself.

Therfore you need to enter the <img /> context. You can do that easily like this:

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

From there you can target the currentTarget property, among others. This will enter the context of your element. So now you can do something like this:

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

The same can be done for onMouseOut.

You can use this same method on your other elements, as you will certainly need to do this again. But be careful as this is a not the only solution. On bigger projects you may want to consider using a store (Redux), and passing props rather than mutating elements.




回答2:


Best is to manage this in the state:

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




回答3:


Here's a non-class approach using a functional component and typescript:

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 || '');
    }}
  />
);

It can be used like that:

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


来源:https://stackoverflow.com/questions/48703510/change-image-on-hover-in-jsx

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!