Javascript 正在尝试禁用步骤中的未来步骤

大家好，我正在尝试使用Ant设计步骤禁用未来的步骤，但无法禁用

下面是我与步骤相关的代码

 <Steps size="small" onChange={handleChange} current={currentStepNumber}>
    <Step title="Concept" />
    <Step title="Schematic" />
    <Step title="Design Development" />
    <Step title="Construction Documents" />
    <Step title="Construction Administration" />
    <Step title="Closed" />
  </Steps>

这就是我根据api的输入设置初始步骤编号的地方

    useEffect(() => {
      if (!ProjectData) {
        return;
      }
      const { projectPhase } = ProjectData.Projects[0];
      if (projectPhase?.name) {
         const { stepNumber } = Object.values(PROJECT_PHASE).find(s => s.label === projectPhase.name);
         setCurrentStepNumber(stepNumber);
       }
    }, [ProjectData]);

我正在根据页面初始加载时的API数据设置步骤编号。当用户处于

步骤2

时，我还需要启用

步骤1

，同时需要禁用

步骤3、4、5和6

。如果用户在

步骤3

，我需要禁用

步骤4、5和6

，并需要启用

1、2

目前，我无法禁用未来的步骤，我可以点击未来的步骤，如下图所示

---

请任何人告诉我，是否有任何方法可以禁用未来步骤并仅启用与当前步骤编号相关的先前步骤

---

非常感谢

如果您正在为步骤编号轮询api，则不必使用onchange事件处理程序，更新当前道具将禁用高级步骤。。 只是为了演示，我用定时器代替了轮询api

代码沙盒

const AntSteps=（）=>{
常量[currentStepNumber，setCurrentStepNumber]=使用状态（0）；
const[timer，setTimer]=useState（0）；
useffect（（）=>{
如果（计时器==6）{
设置计时器（0）；
setCurrentStepNumber（0）；
}
const intervalId=setInterval（（）=>{
设置定时器（定时器+1）；
setCurrentStepNumber（定时器+1）；
}, 5000);
return（）=>clearInterval（intervalId）；
}，[计时器]；
返回(
);
};

---

如果您正在轮询api以获取初始步骤编号，并且希望基于用户单击逐个启用其他步骤，则可以使用禁用的道具来实现它

代码沙盒

const AntSteps=（）=>{
常量[currentStepNumber，setCurrentStepNumber]=使用状态（0）；
const handleChange=当前=>{
log（'onChange:'，当前）；
setCurrentStepNumber（电流+1）；
};
返回(
如果您正在为步骤号轮询api，则不必使用onchange事件处理程序，更新当前道具将禁用高级步骤。。
只是为了演示，我用定时器代替了轮询api

代码沙盒

const AntSteps=（）=>{
常量[currentStepNumber，setCurrentStepNumber]=使用状态（0）；
const[timer，setTimer]=useState（0）；
useffect（（）=>{
如果（计时器==6）{
设置计时器（0）；
setCurrentStepNumber（0）；
}
const intervalId=setInterval（（）=>{
设置定时器（定时器+1）；
setCurrentStepNumber（定时器+1）；
}, 5000);
return（）=>clearInterval（intervalId）；
}，[计时器]；
返回(
);
};

如果您正在轮询api以获取初始步骤编号，并且希望基于用户单击逐个启用其他步骤，则可以使用禁用的道具来实现它

代码沙盒

const AntSteps=（）=>{
常量[currentStepNumber，setCurrentStepNumber]=使用状态（0）；
const handleChange=当前=>{
log（'onChange:'，当前）；
setCurrentStepNumber（电流+1）；
};
返回(
任何人都可以告诉我如何实现这一点吗？只需在Step组件中添加一个道具，然后在当前代码中填充类似于
disabled={currentStep<3}的内容
。最初，您是根据api设置步骤编号，您希望如何进入下一步…您是轮询api并更新步骤？还是希望用户一次只单击一个步骤（如启用步骤1后，他只能单击2）？任何人都可以告诉我如何实现这一点吗？只需在步骤组件中添加一个道具。然后在当前代码中填入
disabled={currentStep<3}
。最初，您是基于api设置步骤编号，您希望如何进入下一步……您是轮询api并更新步骤？还是希望用户一次只单击一个步骤（如启用步骤1后，他只能单击2）？
    useEffect(() => {
      if (!ProjectData) {
        return;
      }
      const { projectPhase } = ProjectData.Projects[0];
      if (projectPhase?.name) {
         const { stepNumber } = Object.values(PROJECT_PHASE).find(s => s.label === projectPhase.name);
         setCurrentStepNumber(stepNumber);
       }
    }, [ProjectData]);

const AntSteps = () => {
  const [currentStepNumber, setCurrentStepNumber] = useState(0);

  const [timer, setTimer] = useState(0);

  useEffect(() => {
    if (timer === 6) {
      setTimer(0);
      setCurrentStepNumber(0);
    }
    const intervalId = setInterval(() => {
      setTimer(timer + 1);
      setCurrentStepNumber(timer + 1);
    }, 5000);

    return () => clearInterval(intervalId);
  }, [timer]);

  return (
    <Steps size="small" current={currentStepNumber}>
      <Step title="Concept" />
      <Step title="Schematic" />
      <Step title="Design Development" />
      <Step title="Construction Documents" />
      <Step title="Construction Administration" />
      <Step title="Closed" />
    </Steps>
  );
};

const AntSteps = () => {
  const [currentStepNumber, setCurrentStepNumber] = useState(0);

 

  const handleChange = current => {
    console.log('onChange:', current);
    setCurrentStepNumber(current + 1);
 };

  return (
    <Steps size="small" onChange={handleChange} current={currentStepNumber}>
      <Step title="Concept"  />
      <Step title="Schematic"  />
      <Step title="Design Development" disabled={ currentStepNumber + 1 < 2} />
      <Step title="Construction Documents" disabled={currentStepNumber + 1 < 3} />
      <Step title="Construction Administration" disabled={currentStepNumber + 1 <4} />
      <Step title="Closed" disabled={currentStepNumber + 1 < 5}/>
    </Steps>
  );
};