反应 js onMouseEnter 改变图像答案

【问题标题】：react js onMouseEnter change image反应 js onMouseEnter 改变图像
【发布时间】：2017-09-06 09:32:45
【问题描述】：

假设我有一个返回的函数：

 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时，该div的图片都会变成其他图片（例如“xxx.png”）

谁能帮我解决这个问题？

谢谢，

【问题讨论】：

jsfiddle.net/69z2wepo/76120
@ReiDien 谢谢！但是我如何用参数调用 this.handleMouseEnter 呢？ this.handleMouseEnter('img111.jpg') 给了我一个错误..谢谢。
jsfiddle.net/69z2wepo/76171

标签： reactjs

【解决方案1】：

您可以将状态用于图像源。每当鼠标悬停在 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 store。

【讨论】：

【解决方案2】：

使用组件状态更新图片 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>
  );
}

【讨论】：