Der useState-Hook ändert den Status aller Komponenten, nicht nur des erwarteten.

Question

Ich verwende React. Ich versuche, den Stil des angeklickten Bildes zu ändern. Mit dieser Funktion wird der Zustand jedoch auf alle Elemente angewendet. Das onClick-Ereignis wird auf das Bild angewendet. Klicken Sie auf eines und die Rahmenfarbe der anderen Bilder sollte sich in #a2a0ff ändern. Nur angeklickte Bilder sollten die Farbe #4D4AFF haben.

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

function App() {
  // 定义用户地理位置
  var getLocationPromise = new Promise((resolve) => {
    navigator.geolocation.getCurrentPosition(async function (position) {
    resolve([position.coords.latitude, position.coords.longitude])
    })
  })
    var [lat, setLat] = React.useState(0)
    var [lng, setLng] = React.useState(0)
  getLocationPromise.then((location) => {
    setLat(location[0])
    setLng(location[1])
  })
  if (lat == 0 && lng == 0) {
    lat = 55.75
    lng = 37.57 }

  // 创建地图
  var myMap = React.useMemo(
    () => ({ center: [lat, lng], zoom: 9 })
  );
  
  // 处理标记
  const [imageHref, setImageHref] = React.useState("images/Marks/ZemMark.png");
  const [ImgStyle, setImgStyle] = React.useState()

function changeGeoPosition(newLink) {
    setImageHref(newLink);
    setImgStyle("5px solid #4D4AFF")
}
    return (
      <div className="ContextSP">
        <div className="DivMarks">
        <img className="MarkLeftImage" src="images/Marks/ZemMark.png" onClick={function() {changeGeoPosition("images/Marks/ZemMark.png")}} style={{borderBottom: ImgStyle}}/>
        <img className="MarkImage" src="images/Marks/Redcar1Mark.png" onClick={function() {changeGeoPosition("images/Marks/Redcar1Mark.png")}} style={{borderBottom: ImgStyle}}/>
        <img className="MarkImage" src="images/Marks/Redcar2Mark.png" onClick={function() {changeGeoPosition("images/Marks/Redcar2Mark.png")}} style={{borderBottom: ImgStyle}}/>
        <img className="MarkImage" src="images/Marks/GreencarMark.png" onClick={function() {changeGeoPosition("images/Marks/GreencarMark.png")}} style={{borderBottom: ImgStyle}}/>
        <img className="MarkRightImage" src="images/Marks/YellowcarMark.png" onClick={function() {changeGeoPosition("images/Marks/YellowcarMark.png")}} style={{borderBottom: ImgStyle}}/> 
        </div>
          <YMaps>
          <Map style={{width: '100%', height: '100%', margin: '0 0 10px 0', border: '3px solid #4D4AFF'}} state={myMap}>
            <div id="Prnt">
              <Placemark geometry={[lat, lng]} 
                  options={{
                    iconLayout: 'default#image',
                    iconImageHref: imageHref,
                    iconImageSize: [40, 40],
                    iconImageOffset: [0, 0],
                    iconOffset: [-5, -38]
                  }} id="myPosition"></Placemark>
              </div>
          </Map>
          </YMaps>
        </div>
        )
    }
    export default App;

Answer 1

您只有一个名为ImgStyle的变量，它应用于所有图像的样式，并且其值设置为所有onclick事件，所以它们的样式总是相同的。

要以这种方式做到这一点，您需要5个单独的状态变量 - 每个图像一个。但我假设您实际上只想在最多一个图像上显示边框 - 刚刚点击的那个图像 - 在这种情况下，您根本不需要单独的状态变量。只需根据当前的imageHref和图像的实际href计算样式：

function hasBorder(href) {
  return href === imageHref;
}

然后为每个图像应用它（下面仅显示一个示例，但应该很明显如何应用于其他图像）：

<img className="MarkLeftImage" src="images/Marks/ZemMark.png" onClick={function() {changeGeoPosition("images/Marks/ZemMark.png")}} style={hasBorder("images/Marks/ZemMark.png") ? {borderBottom: "5px solid #4D4AFF" } : {}}/>

您还可以通过创建一个href字符串数组，并通过map函数遍历生成每个img标签来进一步简化此过程。