如何在ReactJs中更改img src onmouseover

**我想更改鼠标上的图像src。此外，我已动态添加了多个图像。**

常数服务数据=[
{
ID:“01”，
标题：“发电”，
描述：
“我们在建造热力、水力和联合循环发电厂方面拥有丰富的经验。我们为发电厂提供定制的即装即用解决方案，包括总EPC、电厂综合平衡（BOP）和烟气脱硫（FGD）解决方案。”，
imgsrc:“https://www.tataprojects.com/images/Transmission-Line.jpg",
imgsrcHover:“https://www.tataprojects.com/images/Sunbstations-min.jpg"
},
{
ID:“02”，
标题：“传输”，
描述：
“我们已成功调试了超过13000公里的输电线路，跨越多个电压等级，包括800kv HVDC项目”，
imgsrc:“https://www.tataprojects.com/images/Sunbstations-min.jpg",
imgsrcHover:“https://www.tataprojects.com/images/Sunbstations-min.jpg"
},
{
ID:“03”，
标题：“变电站”，
描述：
“我们优化设计的塔架和变电站结构使我们能够减少导线损耗，确保更快的施工和按时交付。”，
imgsrc:“https://www.tataprojects.com/images/Tower-Manufactaring-Unit.jpg",
imgsrcHover:“https://www.tataprojects.com/images/Sunbstations-min.jpg"
},
{
ID:“04”，
标题：“塔架制造单位”，
描述：
“我们拥有一个最先进的制造单位来制造输电线路塔和结构。该单位占地40英亩。”，
imgsrc:“https://www.tataprojects.com/images/Smart-Grid-min.jpg",
imgsrcHover:“https://www.tataprojects.com/images/Sunbstations-min.jpg"
}
];
导出默认服务数据；
从“react”导入react；
从“./data/Servicesdata”导入Servicesdata；
常量服务=（）=>{
返回(
关键领域
{Servicesdata.map（（val，index）=>{
返回(
{val.title}
{val.desc}
);
})}
);
};
出口默认服务；

---

对代码进行以下修改：

this.setState({
  servicesData: ServicesData;
})

并在mouseover上调用以下函数，将索引和newSrc作为参数传递：

imgSrcUpdate(index, newSrc) {
  let oldData = this.state.servicesData;
  oldData[index][src] = newSrc;
  this.setState({
    servicesData: oldData
  })
}

与此相反：

{Servicesdata.map((val, index) => { ...

使用：

---

我们可以使用

onMouseOver

和

onMouseOut

事件处理程序来切换当前悬停图像的图像

• 我们可以将对象的ID存储在悬停在该特定对象的图像上时的状态中
• 并在鼠标离开时将其重置为“”
• 在渲染中，我们可以检查状态中的ID与对象ID，如果它们匹配，则使用

  imgsrcHover

  else使用

  imgsrc

const Servicesdata=[{ID:“01”，标题：“发电”，描述：“我们在建造热力、水力和联合循环发电厂方面拥有丰富的经验。我们为发电厂提供定制的现成解决方案，包括总EPC和电厂综合平衡（BOP）以及烟气脱硫（FGD）解决方案。”imgsrc："https://www.tataprojects.com/images/Transmission-Line.jpg，imgsrcHover:https://www.tataprojects.com/images/Sunbstations-min.jpg“}，{ID:“02”，标题：“输电”，描述：“我们已成功调试了超过13000公里的跨越多个电压等级的输电线路，包括800kv HVDC项目”，imgsrc:https://www.tataprojects.com/images/Sunbstations-min.jpg，imgsrcHover:https://www.tataprojects.com/images/Sunbstations-min.jpg“}，{ID:“03”，标题：“变电站”，描述：“我们优化设计的塔架和变电站结构使我们能够减少导线损耗，确保更快的施工和按时交付。”，imgsrc:https://www.tataprojects.com/images/Tower-Manufactaring-Unit.jpg，imgsrcHover:https://www.tataprojects.com/images/Sunbstations-min.jpg“}，{ID:“04”，标题：“输电塔制造单位”，描述：“我们有一个最先进的制造单位来制造输电线路塔和结构。该单位分布在40英亩的土地上。”，imgsrc:https://www.tataprojects.com/images/Smart-Grid-min.jpg，imgsrcHover:https://www.tataprojects.com/images/Sunbstations-min.jpg"}];
const{useState}=React；
常量服务=（）=>{
//将当前悬停对象的id存储在状态中
//最初是“”
const[currentHoveredId，setCurrentHoveredId]=useState（“”）；
//鼠标悬停时，使用cuurent对象的id更新id
const onMouseOver=（id）=>{
setCurrentHoveredId（id）；
}
//将光标移出图像后，将其重置为“”
const onMouseOut=（）=>{
setCurrentHoveredId（“”）；
}
报税表（
关键领域
{Servicesdata.map（（val，index）=>{
返回(
{val.title}
{val.desc}
{/*根据处于状态的id和当前对象的id的结果切换图像源*/}
{onMouseOver（val.ID）}
{this.state.servicesData.map((val, index) => {....