大家好,我正在尝试使用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] 删除。
我来说两句