React中useState导致所有图片样式被修改，如何仅修改点击的图片？

你的问题出在使用单个状态ImgStyle控制所有图片的边框样式，导致点击任意图片时所有元素都会应用相同样式。我们可以通过跟踪当前选中的图片标识来实现仅目标图片高亮的效果，具体修改如下：

关键改动点 #

• 将原有的ImgStyle状态替换为selectedImgSrc，用于记录当前选中图片的路径
• 在点击事件中更新选中的图片路径
• 每个图片根据自身路径是否与selectedImgSrc匹配，动态设置边框样式
• 可选优化：将图片数据抽成数组循环渲染，减少重复代码

修改后的完整代码 #

import React from "react";
import './SearchPower.css';
import { YMaps, Map, Placemark} from '@pbe/react-yandex-maps';

function App() {
  // 获取用户地理位置
  const getLocationPromise = new Promise((resolve) => {
    navigator.geolocation.getCurrentPosition(function (position) {
      resolve([position.coords.latitude, position.coords.longitude])
    })
  })
  
  const [lat, setLat] = React.useState(0)
  const [lng, setLng] = React.useState(0)
  
  React.useEffect(() => {
    getLocationPromise.then((location) => {
      setLat(location[0])
      setLng(location[1])
    })
  }, [])

  // 默认地理位置
  const currentLat = lat === 0 && lng === 0 ? 55.75 : lat;
  const currentLng = lat === 0 && lng === 0 ? 37.57 : lng;

  // 创建地图
  const myMap = React.useMemo(
    () => ({ center: [currentLat, currentLng], zoom: 9 })
  );
  
  // 标记相关处理
  const [imageHref, setImageHref] = React.useState("images/Marks/ZemMark.png");
  // 跟踪当前选中的图片路径
  const [selectedImgSrc, setSelectedImgSrc] = React.useState("images/Marks/ZemMark.png");

  function changeGeoPosition(newLink) {
    setImageHref(newLink);
    setSelectedImgSrc(newLink);
  }

  // 抽离图片数据，方便维护和循环渲染
  const markImages = [
    { src: "images/Marks/ZemMark.png", className: "MarkLeftImage" },
    { src: "images/Marks/Redcar1Mark.png", className: "MarkImage" },
    { src: "images/Marks/Redcar2Mark.png", className: "MarkImage" },
    { src: "images/Marks/GreencarMark.png", className: "MarkImage" },
    { src: "images/Marks/YellowcarMark.png", className: "MarkRightImage" },
  ];

  return (
    <div className="ContextSP">
      <div className="DivMarks">
        {markImages.map((img, index) => (
          <img
            key={index}
            className={img.className}
            src={img.src}
            onClick={() => changeGeoPosition(img.src)}
            style={{
              borderBottom: selectedImgSrc === img.src 
                ? "5px solid #4D4AFF" 
                : "5px solid #a2a0ff"
            }}
          />
        ))}
      </div>
      <YMaps>
        <Map 
          style={{width: '100%', height: '100%', margin: '0 0 10px 0', border: '3px solid #4D4AFF'}} 
          state={myMap}
        >
          <Placemark 
            geometry={[currentLat, currentLng]} 
            options={{
              iconLayout: 'default#image',
              iconImageHref: imageHref,
              iconImageSize: [40, 40],
              iconImageOffset: [0, 0],
              iconOffset: [-5, -38]
            }} 
            id="myPosition"
          ></Placemark>
        </Map>
      </YMaps>
    </div>
  )
}

export default App;

额外优化说明 #

1. 使用useEffect包裹地理位置获取逻辑，避免组件每次渲染都重复执行Promise
2. 将默认地理位置的判断逻辑抽成变量，让代码更清晰
3. 把图片数据抽成数组循环渲染，减少重复代码，后续新增图片只需修改数组即可

内容的提问来源于stack exchange，提问作者Виктор