React实现最小间隔2步、最大间隔5步的进度条交互问题

核心实现逻辑 #

• 点击步骤前先做合法性校验，仅符合间隔规则的操作才会更新状态
• 先获取当前已激活的最后一个步骤索引，作为间隔计算的基准值
• 区分首次无选中和已有选中项两种场景分别做规则校验

完整实现代码 #

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [progressBar, setProgressBar] = useState([
    { isActive: false, name: "step1" },
    { isActive: false, name: "step2" },
    { isActive: false, name: "step3" },
    { isActive: false, name: "step4" },
    { isActive: false, name: "step5" },
    { isActive: false, name: "step6" },
    { isActive: false, name: "step7" }
  ]);

  const handleStepClick = (clickIndex) => {
    // 获取当前最后一个激活项的索引，无激活项返回-1
    const lastActiveIndex = progressBar.findLastIndex(item => item.isActive);
    let isClickValid = false;

    if (lastActiveIndex === -1) {
      // 首次选择场景：禁止选第1项，最小选第2项（对应索引1）
      isClickValid = clickIndex >= 1;
    } else {
      // 非首次选择场景：间隔≥2且≤5，仅允许往后选
      const stepGap = clickIndex - lastActiveIndex;
      isClickValid = stepGap >= 2 && stepGap <=5;
    }

    // 不符合规则直接终止操作
    if (!isClickValid) return;

    // 符合规则更新进度条状态
    setProgressBar(prevList => prevList.map((item, idx) => ({
      ...item,
      isActive: idx <= clickIndex
    })))
  };

  return (
    <div>
      {progressBar.map((el, i) => (
        <span
          key={el.name}
          className={el.isActive ? "red" : ""}
          onClick={() => handleStepClick(i)}
        >
          {el.name}
        </span>
      ))}
    </div>
  );
}

原有逻辑问题说明 #

1. 间隔计算逻辑错误：反向查找得到的索引没有和点击索引做正确的差值计算，无法判断真实的步长间隔
2. 缺少合法性前置拦截：未校验点击是否符合规则就直接更新状态
3. 缺失初始场景判断：没有处理首次无选中项的特殊规则

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