Javascript 正在尝试将MouseOver上的图像与React交换

我的数据库中有两个图像（图像和图像2）。我正在从数据库中获取这两幅图像，但我希望图像在MouseOver上更改，我不太明白如何进行更改。一切帮助都将不胜感激

导出默认类商店扩展组件{
建造师（道具）{
超级（道具）；
此.state={
产品：[]
};
}
componentDidMount（）{
这个.getProducts（）；
}
getProducts=（）=>{
获取（“/users”）
.then（response=>response.json（））
。然后（响应=>{
this.setState（{products:response}）
})
}
setNewImage=（）=>{
}
render（）{
const{products}=this.state；
返回(
{products.map（（产品）=>(



))}

您只需操作从产品中获得的内容，并使用一个名为“shownImage”的参数将其设置为状态，我在sandBox上制作了代码，以供示例使用，但这里也将保留：

import React，{Component}来自“React”；
从“react dom”导入react dom；
导出默认类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
产品：[
{
图像：“https://vignette.wikia.nocookie.net/neon-colors/images/0/0c/Neon_red.JPG/revision/latest/window-crop/width/200/x-offset/0/y-offset/0/window-width/217/window-height/217?cb=20130529004401",
图像2:“https://www.tarkett.az/image/cache/catalog/SPOR/V35/C001348-omnisports-r35-ru/royal-blue-200x200.jpg",
展示：“图像”
},
{
图像：“https://www.tarkett.az/image/cache/catalog/SPOR/V35/C001348-omnisports-r35-ru/royal-blue-200x200.jpg",
图像2:“https://vignette.wikia.nocookie.net/neon-colors/images/0/0c/Neon_red.JPG/revision/latest/window-crop/width/200/x-offset/0/y-offset/0/window-width/217/window-height/217?cb=20130529004401",
展示：“图像”
}
]
};
}
ShowDifferentimage=（图像名称、产品索引）=>{
const{products}=this.state；
产品[productIndex]。shownImage=imageName；
这是我的国家({
产品
});
};
render（）{
返回(
你好，图片！
{this.state.products.map（（产品，索引）=>(
this.showdredentimage（“image2”，索引）}
onMouseOut={（）=>this.showDifferentimage（“图像”，索引）}
/>
))}
);
}
}
render（，document.getElementById（“根”））；

在你的情况下，它只是

this.setState（{products:response.map（product=>{…product，shownImage:'image'}）}）

,，

---

或者

this.setState（{products:response.map（product=>{image:product.image，image2:product.image2，shownImage:'image'}}）

为当前图像创建一个新的状态变量。然后使用

this.setState（}

）创建一个更改此变量的函数（在您的情况下是

setNewImage

）。然后从onMouseOver调用此函数。您很可能也希望onMouseOut在用户移出元素时返回初始图像

import React, { Component } from "react";
import ReactDOM from "react-dom";

export default class Shop extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [
        {
          image: "https://vignette.wikia.nocookie.net/neon-colors/images/0/0c/Neon_red.JPG/revision/latest/window-crop/width/200/x-offset/0/y-offset/0/window-width/217/window-height/217?cb=20130529004401",
          image2: "https://www.tarkett.az/image/cache/catalog/SPOR/V35/C001348-omnisports-r35-ru/royal-blue-200x200.jpg",
          shownImage: "image"
        },
        {
          image: "https://www.tarkett.az/image/cache/catalog/SPOR/V35/C001348-omnisports-r35-ru/royal-blue-200x200.jpg",
          image2: "https://vignette.wikia.nocookie.net/neon-colors/images/0/0c/Neon_red.JPG/revision/latest/window-crop/width/200/x-offset/0/y-offset/0/window-width/217/window-height/217?cb=20130529004401",
          shownImage: "image"
        }
      ]
    };
  }

  showDiffrentImage = (imageName, productIndex) => {
    const { products } = this.state;
    products[productIndex].shownImage = imageName;

    this.setState({
      products
    });
  };

  render() {
    return (
      <div>
        Hello images!
        {this.state.products.map((product, index) => (
          <div>
            <img
              alt={'ops my img broke'}
              src={product[product.shownImage]}
              onMouseOver={() => this.showDiffrentImage("image2", index)}
              onMouseOut={() => this.showDiffrentImage("image", index)}
            />
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<Shop />, document.getElementById("root"));