如何在 ReactJS 中使用加载图标更改步骤编号

Question

我正在使用 reactjs 开发项目，目前我正在使用 Ant-design 作为向导表单。我会分享 ant-design link。当用户单击下一步时，我想用加载图标更改步骤编号。当前步骤编号（例如 1）更改为加载并继续下一步。我是初学者，你能帮帮我吗？

Ant-Design Link: Ant-design

Answer 1

这可以通过使用步骤 custom icon 属性来完成。这个想法是你可以在 steps 中传递 key，如下所示：

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 如下所示：

<Step
    key={item.title}
    title={item.title}
    icon={item.key !== 1 && item.key === current+1 ? <Icon type="loading" /> : ""}
/>

您可以查看working demo。

如何在 ReactJS 中使用加载图标更改步骤编号

How to change Step number with Loading Icon in ReactJS

javascript

reactjs

antd

ant-design-pro