Cangkuk useState mengubah keadaan semua komponen, bukan hanya yang diharapkan.

Question

Saya menggunakan React. Saya cuba mengubah gaya imej yang diklik. Tetapi keadaan digunakan untuk semua elemen menggunakan fungsi ini. acara onClick digunakan pada gambar. Klik pada satu dan warna jidar imej lain akan berubah kepada #a2a0ff. Hanya imej yang diklik harus mempunyai warna #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

Anda hanya ada satu acara bernama ImgStyle的变量，它应用于所有图像的样式，并且其值设置为所有onclick jadi ia sentiasa digayakan sama.

Untuk melakukannya dengan cara ini, anda memerlukan 5 pembolehubah keadaan berasingan - satu untuk setiap imej. Tetapi saya mengandaikan anda sebenarnya hanya mahu memaparkan sempadan pada paling banyak satu imej - yang baru anda klik - dalam kes ini anda tidak memerlukan pembolehubah keadaan yang berasingan sama sekali. Cuma kira gaya berdasarkan imageHref semasa dan href sebenar imej:

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

Kemudian gunakannya untuk setiap imej (hanya contoh ditunjukkan di bawah, tetapi harus jelas cara untuk digunakan pada imej lain):

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

Anda juga boleh memudahkan lagi proses ini dengan mencipta tag href字符串数组，并通过map函数遍历生成每个img.