在Ant Design的步骤组件中,我们可以轻松地实现在进入下一步之前自动提交表单的功能。为此,我们可以监听步骤中表单的提交事件,并在表单提交后手动触发进入下一步的事件。
以下是示例代码:
import React from 'react';
import { Steps, Button, message } from 'antd';
import StepOneForm from './StepOneForm';
import StepTwoForm from './StepTwoForm';
import StepThreeForm from './StepThreeForm';
const { Step } = Steps;
class FormSteps extends React.Component {
state = {
current: 0,
loading: false,
};
formRef1 = React.createRef();
formRef2 = React.createRef();
formRef3 = React.createRef();
onSubmitStep1 = () => {
const { form } = this.formRef1.current;
form.validateFields((err, values) => {
if (!err) {
this.setState({ loading: true });
setTimeout(() => {
message.success('Step 1 submitted successfully');
this.setState({ loading: false, current: 1 });
}, 1000);
}
});
};
onSubmitStep2 = () => {
const { form } = this.formRef2.current;
form.validateFields((err, values) => {
if (!err) {
this.setState({ loading: true });
setTimeout(() => {
message.success('Step 2 submitted successfully');
this.setState({ loading: false, current: 2 });
}, 1000);
}
});
};
onSubmitStep3 = () => {
const { form } = this.formRef3.current;
form.validateFields((err, values) => {
if (!err) {
this.setState({ loading: true });
setTimeout(() => {
message.success('Step 3 submitted successfully');
this.setState({ loading: false, current: 0 });
}, 1000);
}
});
};
render() {
const { current, loading } = this.state;
return (
<>