Le hook useState modifie l'état de tous les composants, pas seulement celui attendu.

Question

J'utilise React. J'essaie de changer le style de l'image sur laquelle on clique. Mais l'état est appliqué à tous les éléments utilisant cette fonction. L'événement onClick est appliqué à l'image. Cliquez sur l'une et la couleur de la bordure des autres images devrait changer en #a2a0ff. Seules les images cliquées doivent avoir la couleur #4D4AFF.

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

Vous n'avez qu'un seul événement nommé ImgStyle的变量，它应用于所有图像的样式，并且其值设置为所有onclick donc ils ont toujours le même style.

Pour procéder de cette façon, vous avez besoin de 5 variables d'état distinctes - une pour chaque image. Mais je suppose que vous ne souhaitez en réalité afficher la bordure que sur au plus une image - celle sur laquelle vous venez de cliquer - auquel cas vous n'avez pas du tout besoin d'une variable d'état distincte. Calculez simplement le style en fonction du imageHref actuel et du href réel de l'image :

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

Ensuite, appliquez-le pour chaque image (seul un exemple est présenté ci-dessous, mais il devrait être évident comment l'appliquer à d'autres images) :

<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" } : {}}/>

Vous pouvez également simplifier encore plus ce processus en créant une balise href字符串数组，并通过map函数遍历生成每个img.