要使用Ant Design v4的步骤(Steps)和表单(Form)组件,可以按照以下步骤进行操作:
npm install antd@4.0.0 --save
import React from 'react';
import { Steps, Form, Input, Button } from 'antd';
import 'antd/dist/antd.css';
const { Step } = Steps;
const { Item } = Form;
class MyForm extends React.Component {
state = {
currentStep: 0,
};
handleNext = () => {
const { currentStep } = this.state;
this.setState({ currentStep: currentStep + 1 });
};
handlePrev = () => {
const { currentStep } = this.state;
this.setState({ currentStep: currentStep - 1 });
};
handleSubmit = e => {
e.preventDefault();
// 处理表单提交逻辑
};
render() {
const { currentStep } = this.state;
return (
);
}
}
ReactDOM.render( , document.getElementById('root'));
这样就可以使用Ant Design v4的步骤和表单组件了。根据当前步骤的不同,渲染不同的表单字段,并通过handleNext
和handlePrev
方法切换步骤。在最后一个步骤,可以通过handleSubmit
方法处理表单提交。