尝试禁用 Step 中的未来步骤

Question

大家好，我正在尝试使用 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>

然后下面是handle change函数

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 初始加载数据设置步数 page.when 用户正在 step 2 我还需要启用 step 1同时我需要禁用 step 3, 4, 5 and 6。如果用户使用 step 3，我需要禁用 step 4, 5 and 6 并需要启用 1, 2。

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

任何人都可以让我知道，有什么方法可以禁用未来的步骤并仅启用与当前步骤编号相关的先前步骤吗？

非常感谢!!!

Answer 1

如果您正在轮询 api 步数，那么您不必使用 onchange 事件处理程序，更新当前 prop 将禁用前进步数.. 只是为了演示，我使用计时器而不是轮询 api

codesandbox https://codesandbox.io/s/antdesignsteps-Whosebug-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 初始步骤编号，并希望根据用户点击逐一启用其他步骤，那么您可以使用 disabled 道具来实现它。

Codesandbox https://codesandbox.io/s/antdesignstepswithouttimer-Whosebug-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>
  );
};

尝试禁用 Step 中的未来步骤

Trying to disable the future steps in Step

javascript

reactjs

antd

ant-design-pro