web-dev-qa-db-fra.com

Changer l'image en survol dans JSX

Comment changer une image sur hover dans JSX

J'essaie quelque chose comme ça:

<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')} />
javascriptreactjsjsxonmouseoveronmouseout
6
new-boy-in-web-dev-business

Je suppose que vous écrivez ce code dans un composant React. Tels que:

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

Ciblage this.src ne fonctionnera pas dans ce cas car vous recherchez essentiellement quelque chose nommé src dans votre classe. Par exemple this.src pourrait trouver quelque chose comme ceci:

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

Mais ce n'est pas ce que tu veux faire. Vous souhaitez cibler l'image elle-même.

Vous devez donc saisir le <img /> le contexte. Vous pouvez le faire facilement comme ceci:

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

De là, vous pouvez cibler la propriété currentTarget, entre autres. Cela entrera dans le contexte de votre élément. Alors maintenant, vous pouvez faire quelque chose comme ça:

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

La même chose peut être faite pour onMouseOut.

Vous pouvez utiliser cette même méthode sur vos autres éléments, car vous devrez certainement recommencer. Mais attention, ce n'est pas la seule solution. Sur des projets plus importants, vous voudrez peut-être envisager d'utiliser un magasin ( Redux ) et de passer des accessoires plutôt que des éléments mutants.

14
typekev

Le mieux est de gérer cela dans l'état:

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

4
max li