如何在 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 ?

Ant-Design 链接: Ant-design

推荐答案

这可以通过使用步骤来完成 自定义图标 属性.这个想法是你可以在 steps 中传递 key ，如下所示:

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