は変化画像

Question

onMouseEnter JSを反応させ、私は返す関数があることを言うことができます：

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

イメージパスにreduxストアを使用することもできます。