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时，特定div的图像将更改为其他图片（例如“xxx.png”）

任何人都可以帮我这个吗？

感谢，

Answer 1

您可以使用状态作为图像源。只要鼠标悬停在div上，就更改图像源。像这样：

ComponentB

您还可以将redux存储用于图像路径。

Answer 2

使用组件状态更新图片网址。

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

反应js onMouseEnter更改图像

2 个答案: