antd 5-steps 组件

api不多说 简单的几个即可：

> 以下是Ant Design Steps组件的一些常用API：

1. current：设置当前步骤的索引值，从0开始计数。

2. direction：设置步骤条的方向，可选值为“horizontal”（水平）或“vertical”（垂直）。

3. progressDot：设置步骤条每个步骤的状态，可选值为“true”（显示默认状态），“false”（不显示状态）或一个自定义的React组件。

4. size：设置步骤条的尺寸，可选值为“default”（默认）或“small”。

5. status：设置当前步骤的状态，可选值为“wait”（等待）、“process”（进行中）、“finish”（完成）或“error”（错误）。

6. onChange：设置步骤条的回调函数，当步骤改变时触发。

7. className：设置步骤条的CSS类名。

8. style：设置步骤条的样式。

我们从上文知道 组件是通过current来控制的

所以我们写逻辑然后来控制步骤

const description = '请您认真填写信息';
const App = () => {
  let [steps ,setSteps]=useState(0)
  let [value ,setValue]=useState("步骤1")
  const onClick = (e) => {
    console.log('click ', e);
  };
  //点击逻辑
  const clickSteps=()=>{
      console.log(steps,1);
      setSteps(steps+1)
      console.log(steps,2);
      setValue(steps==1?"步骤3":steps==2?"注册完成":"步骤2")
      if(steps>=3){
        setValue("注册完成点击跳转");
      }
  }
  
  return (
    <> 
    <Steps
    // status="error"//错误
    current={steps}
    // progressDot//点状样式
    // direction="vertical" //纵横样式
    items={[
      {
        title: '填写用户名',
        description,
      },
      {
        title: '填写邮箱',
        description,
        subTitle: 'Left 00:00:08',
      },
      {
        title: '填写密码',
        description,
      },
    ]}
  />
  <Button onClick={clickSteps}>{value}</Button>
    </>
   
 
  );
};
export default App;

效果如图：