React中如何点击切换动态渲染的步进器图片？

核心问题 #

1. 未声明的全局变量导致ID重复：levelOneId、levelTwoId、levelThreeId没有用let/const声明，会成为全局变量，循环中每次赋值都会覆盖之前的值，最终所有步进器的按钮和图片都会使用最后一次循环生成的ID。这就导致点击任何步进器时，document.getElementById只会找到第一个匹配该ID的元素（也就是第一个能力项的图片），所以只有第一个能切换。
2. 直接操作DOM不符合React模式：使用原生DOM方法修改图片src，违背了React的状态驱动更新原则，容易引发不可预测的问题。

修复步骤 #

1. 用状态管理图片切换

首先，初始化状态来跟踪每个能力项各层级的图片地址：

import { useState } from 'react';

// 假设你的初始图片和切换后图片已经定义
// const InitialLevelOne = '初始图片1地址';
// const Levelfirt = '切换后图片1地址';
// ...其他图片常量

const YourComponent = (props) => {
  // 用对象存储每个步进器的图片状态，键格式为"索引-层级"，比如"0-1"代表第一个能力项的第一级
  const [stepImages, setStepImages] = useState({});
  const [selectedValue, setSelectedValue] = useState('');

  // 统一处理步进器点击事件
  const handleStepClick = (compIndex, level) => {
    // 根据层级选择要切换的图片
    const targetImage = {
      1: Levelfirt,
      2: LevelTwo, // 对应你原来的ChangeIconLevelTwo里的图片
      3: LevelThree // 对应你原来的ChangeIconLevelThree里的图片
    }[level];

    // 更新状态
    setStepImages(prevState => ({
      ...prevState,
      [`${compIndex}-${level}`]: targetImage
    }));
    setSelectedValue(level.toString());
  };

  // ...其他组件代码
}

2. 修正循环中的变量声明与JSX渲染

在map循环中用const声明变量，形成块级作用域；同时移除不必要的ID，通过状态控制图片src，不再依赖DOM操作：

<div className="competency-level-externally">
  {compArr.map((comp, compIndex) => {
    // 用const声明唯一键，避免全局覆盖
    const levelOneKey = `${compIndex}-1`;
    const levelTwoKey = `${compIndex}-2`;
    const levelThreeKey = `${compIndex}-3`;

    return (
      <div key={compIndex} className="comp-cont-externally">
        <p className="competency-text">{comp}</p>
        <div className="react-step">
          <ProgressBar
            percent={(props.step + 1) * 25}
            filledBackground="black"
            height="10px">
            {/* 移除button的ID，不需要通过DOM获取 */}
            <button
              style={{
                border: "none",
                backgroundColor: "transparent",
                marginTop: "-4rem",
              }}>
              <Step transition="scale">
                {({ accomplished, index }) => (
                  <div
                    style={{
                      backgroundColor: accomplished ? "oranged" : null,
                    }}
                    className={`step ${accomplished ? "completed" : ""}`}>
                    <div className="btn"> {/* 把id="btn"改成class，避免重复ID */}
                      <img
                        onClick={() => handleStepClick(compIndex, 1)}
                        src={stepImages[levelOneKey] || InitialLevelOne}
                        style={{ height: "55px" }}
                        alt="1"
                      />
                    </div>
                  </div>
                )}
              </Step>
            </button>
            <button
              style={{
                border: "none",
                backgroundColor: "transparent",
                marginTop: "-4rem",
              }}>
              <Step transition="scale">
                {({ accomplished, index }) => (
                  <div
                    style={{
                      backgroundColor: accomplished ? "oranged" : null,
                    }}
                    className={`step ${accomplished ? "completed" : ""}`}>
                    <div className="btn">
                      <img
                        onClick={() => handleStepClick(compIndex, 2)}
                        src={stepImages[levelTwoKey] || InitialLevelTwo}
                        style={{ height: "55px" }}
                        alt="2"
                      />
                    </div>
                  </div>
                )}
              </Step>
            </button>
            <button
              style={{
                border: "none",
                backgroundColor: "transparent",
                marginTop: "-4rem",
              }}>
              <Step transition="scale">
                {({ accomplished, index }) => (
                  <div
                    style={{
                      backgroundColor: accomplished ? "oranged" : null,
                    }}
                    className={`step ${accomplished ? "completed" : ""}`}>
                    <div className="btn">
                      <img
                        onClick={() => handleStepClick(compIndex, 3)}
                        src={stepImages[levelThreeKey] || InitialLevelThree}
                        style={{ height: "55px" }}
                        alt="3"
                      />
                    </div>
                  </div>
                )}
              </Step>
            </button>
          </ProgressBar>
        </div>
      </div>
    );
  })}
</div>

3. 额外优化

• 把原来的id="btn"改成className="btn"，避免循环中生成重复ID。
• 统一了点击事件处理函数，不需要三个分开的ChangeIcon、ChangeIconLevelTwo、ChangeIconLevelThree，减少冗余代码。

内容的提问来源于stack exchange，提问作者toble