réagissent js OnMouseEnter changement d'image

Question

permet de dire que j'ai une fonction qui retourne:

return (
      <div> 
       <ul> 
       <div><img className='privewimg' src={user.img1}/></div> 
       <div><img className='privewimg' src={user.img2}/></div> 
       <div><img className='privewimg' src={user.img3}/></div> 
       </ul> 
      </div> 
     ); 

maintenant, je veux ajouter les fonctions OnMouseEnter et OnMouseLeave

donc à chaque fois que la souris à l'entrée de certains div, l'image de la div spesific va changer en une autre image (par exemple "xxx.png")

Quelqu'un peut-il m'aider avec cela?

grâce,

Answer 1

Utilisez l'état du composant pour mettre à jour l'URL de l'image.

changeImage = (img) => { 
    this.setState({ 
    user: { 
    [img]: newImageUrl 
    } 
    }); 
} 

resetImage = (img) => { 
    this.setState({ 
    // set the old image 
    }); 
} 

render() { 
    const { user } = this.state; 

    return (
    <div> 
     <ul> 
     <li onMouseEnter={() => this.changeImage('img1')} onMouseLeave={() => this.resetImage('img1')}> 
      <img className='privewimg' src={user.img1}/> 
     </li> 
     </ul> 
    </div> 
); 
} 

Answer 2

Vous pouvez utiliser l'état de la source d'image. Et chaque fois que la souris survole la div, changez la source de l'image. Quelque chose comme ceci:

handleMouseOver() { 
    this.setState({imageSrc: 'dummySrc1'}); 
} 

handleMouseLeave() { 
    this.setState({imageSrc: 'dummySrc2'}); 
} 

render() { 
    return(
     <div onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}> 
      <img src={this.state.imageSrc}/> 
     </div> 
    ); 
} 

Vous pouvez également utiliser le magasin redux pour le chemin de l'image.