尝试禁用步骤中的未来步骤

debugcn 发表于 Dev

谜之州

大家好，我正在尝试使用Ant Design步骤禁用以后的步骤，但无法禁用。

这是我与步骤有关的代码

 <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>

然后下面是手柄更改功能

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

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

这是我根据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数据设置步骤号。当用户开启时，step 2我还需要启用step 1且同时需要禁用step 3, 4, 5 and 6。如果用户打开step 3，则需要禁用，step 4, 5 and 6并且需要启用1, 2。

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

能否请任何一个人告诉我，有什么方法可以禁用以后的步骤，而仅启用关于当前步骤号的先前步骤？

提前谢谢了！！！

血管瘤

如果您要轮询api的步骤号，则不必使用onchange事件处理程序，更新当前prop将禁用高级步骤。.只是为了演示，我使用了计时器来代替api

codesandbox https://codesandbox.io/s/antdesignsteps-stackoverflow-73osw?file=/index.js

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>
  );
};

如果您要轮询api以获取初始步骤号，并希望基于用户单击来逐个启用其他步骤，则可以使用禁用的prop来实现。

Codesandbox https://codesandbox.io/s/antdesignstepswithouttimer-stackoverflow-yg0vk?file=/index.js

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>
  );
};

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。