如何在ReactJS中使用加载图标更改步骤编号 [英] How to change Step number with Loading Icon in ReactJS
问题描述
我正在使用reactjs进行项目开发,目前我正在使用Ant-design
的向导形式.我将分享ant-design链接.当用户单击下一步时,我想用加载图标更改步骤号..当前步骤号(例如1)更改为加载并继续进行下一步.我是初学者,您能帮我吗?
I am working on project in reactjs, Currently I am using Ant-design
for Wizard form. I will share ant-design link. I want to change step number with loading icon when user click on next.. The current step number ( for example 1 ) is changed to loading and proceed to next step . I am beginner could you please help me ?
蚂蚁设计链接:蚂蚁设计
推荐答案
This can be done by using steps custom icon property. The idea is you can pass the key
in steps
as given below:
const steps = [
{
title: "First",
content: "First-content",
key: 1
},
{
title: "Second",
content: "Second-content",
key: 2
},
{
title: "Last",
content: "Last-content",
key: 3
}
];
然后您可以使用类型为loading
的Icon
来检查是否current+1 === key
如下所示:
And then you can use Icon
of type loading
in condition to check if current+1 === key
as given below:
<Step
key={item.title}
title={item.title}
icon={item.key !== 1 && item.key === current+1 ? <Icon type="loading" /> : ""}
/>
您可以查看工作演示.
这篇关于如何在ReactJS中使用加载图标更改步骤编号的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!