反應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存儲。