反应JS OnMouseEnter在变化图像

Question

让说，我有一个返回值的函数：现在

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> 
     ); 

，我想补充的功能 OnMouseEnter在和OnMouseLeave在

所以每次鼠标进入一些div，spesific div的图像会更改为其他图片（例如“xxx.png”）

任何人都可以帮助我解决这个问题吗？

谢谢，

Answer 1

使用组件状态更新图像URL。

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

您可以使用图像源的状态。每当鼠标悬停在div上时，更改图像源。像这样：

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

您还可以使用图像路径的REDX存储。