Как изменить номер шага с помощью иконки загрузки в ReactJS

Question

Я работаю над проектом вactjs, в настоящее время я использую Ant-design для формы мастера.Я поделюсь ссылкой на дизайн муравьяЯ хочу изменить номер шага со значком загрузки, когда пользователь нажимает кнопку «Далее». Текущий номер шага (например, 1) изменяется на загрузку и переходит к следующему шагу.Я новичок, не могли бы вы мне помочь?

Ant-Design Ссылка: Ant-design

Answer 1

Это можно сделать, используя свойство custom icon .Идея состоит в том, что вы можете передать key в steps, как указано ниже:

const steps = [
  {
    title: "First",
    content: "First-content",
    key: 1
  },
  {
    title: "Second",
    content: "Second-content",
    key: 2
  },
  {
    title: "Last",
    content: "Last-content",
    key: 3
  }
];

И затем вы можете использовать Icon типа loading в условии, чтобы проверить, если current+1 === key как указанониже:

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

Вы можете проверить рабочий демо .