如何在用户点击步骤指示器时控制步骤切换权限

不管是自定义步骤组件还是用现成UI库，核心都是在步骤切换前插入校验逻辑，通过一个回调函数来控制是否允许变更。下面分两种场景给出具体实现：

自定义步骤组件的实现 #

如果是自己写的步骤指示器，直接在点击事件里嵌入校验逻辑即可：

import { useState } from 'react';

// 自定义步骤指示器组件
const StepIndicator = ({ steps, beforeStepChange }) => {
  const [currentStep, setCurrentStep] = useState(0);

  const handleStepClick = (targetStep) => {
    // 调用校验回调，传当前步骤和目标步骤
    const canSwitch = beforeStepChange(currentStep, targetStep);
    if (canSwitch) {
      setCurrentStep(targetStep);
    }
  };

  return (
    <div className="step-bar">
      {steps.map((step, idx) => (
        <div
          key={idx}
          className={`step ${idx === currentStep ? 'active' : ''}`}
          onClick={() => handleStepClick(idx)}
        >
          <span className="step-number">{idx + 1}</span>
          <span className="step-title">{step.title}</span>
        </div>
      ))}
    </div>
  );
};

// 业务代码中使用
const MyForm = () => {
  const steps = [
    { title: '基本信息' },
    { title: '资质上传' },
    { title: '确认提交' }
  ];

  // 校验回调函数，按需返回true/false
  const beforeStepChange = (current, target) => {
    // 示例1：禁止跳回已完成的步骤
    if (target < current) {
      alert('不允许返回上一步');
      return false;
    }
    // 示例2：当前步骤未完成则禁止前进
    if (current === 0 && !document.getElementById('username').value) {
      alert('请先填写用户名');
      return false;
    }
    return true;
  };

  return <StepIndicator steps={steps} beforeStepChange={beforeStepChange} />;
};

基于UI库的改造（以Ant Design Steps为例） #

像Ant Design这类库的Steps组件自带onChange事件，但默认会直接切换步骤，我们需要包装这个事件，先做校验再决定是否更新状态：

import { useState } from 'react';
import { Steps } from 'antd';

const { Step } = Steps;

const MyWizard = () => {
  const [currentStep, setCurrentStep] = useState(0);
  const steps = [
    { title: '第一步' },
    { title: '第二步' },
    { title: '第三步' }
  ];

  const handleStepChange = (targetStep) => {
    // 先跑校验逻辑
    const canSwitch = beforeStepChange(currentStep, targetStep);
    if (canSwitch) {
      setCurrentStep(targetStep);
    }
  };

  const beforeStepChange = (current, target) => {
    // 示例：禁止跳过第二步直接到第三步
    if (target === 2 && current === 0) {
      alert('必须先完成第二步的内容');
      return false;
    }
    // 其他自定义校验逻辑...
    return true;
  };

  return (
    <Steps current={currentStep} onChange={handleStepChange}>
      {steps.map((step, idx) => (
        <Step key={idx} title={step.title} />
      ))}
    </Steps>
  );
};

核心要点 #

• 校验回调必须接收当前步骤和目标步骤两个参数，返回布尔值控制是否允许切换
• 把校验逻辑完全封装在回调里，组件只负责执行校验并根据结果更新状态
• 校验逻辑可以灵活扩展：权限检查、表单验证、流程规则限制等都能塞进去

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