antD分布表单Demo

import React, { Component } from 'react';
import { Form, Input, InputNumber, Button, Steps  } from 'antd';
const { Step } = Steps;

@Form.create(Exer)
export default class Exer extends Component {
  state = { 
    currentStep: 0, // 当前的步骤
  }

  // 提交
  handleSubmit = e => {
    // 默认情况下提交时获得的err和values都是当前显示的表单项的内容，而且切换步骤之后原来表单项的值也没有了


    // 每一个表单项的getFieldDecorator加上preserve属性之后就可以获取所有渲染过的表单项（比如刚进入页面没有渲染过第二步的表单此时在第一步提交的时候不会有第二步表单的值(感觉不会影响逻辑的判断)，如果已经进入过第二步又回到了第一步，此时在第一步表单提交时会有第二步表单的信息）的值，而且切换步骤之后原来表单项的值依然会保留
    e.preventDefault();
    this.props.form.validateFields(['name', 'age'], (err, values) => {// 此处只校验name、age，若 fieldNames 参数为空，则校验全部组件
      console.log(err, values);
    });
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { currentStep } = this.state;
    return (
      <div>
        <Steps current={currentStep} onChange={current => this.setState({ currentStep: current })}>
          <Step title="第一步"  />
          <Step title="第二步" />
        </Steps>
        <Form layout="vertical" onSubmit={e => this.handleSubmit(e)}>
          {currentStep === 0 && <Form.Item label="姓名">
            {getFieldDecorator('name', {
              rules: [
                { required: true, message: '请填写姓名' },
              ],
              preserve: true, // 即便字段不再使用，也保留该字段的值（做分布表单的关键）
            })(<Input placeholder="请填写姓名" />)}
          </Form.Item>}
          {currentStep === 1 && <Form.Item label="年龄">
            {getFieldDecorator('age', {
              rules: [
                { required: true, message: '请填写年龄' },
              ],
              preserve: true, // 即便字段不再使用，也保留该字段的值（做分布表单的关键）
            })(<InputNumber min={1} max={100} />)}
          </Form.Item>}
        </Form>
          <div>
            <Button type="primary" onClick={this.handleSubmit}>提交</Button>
          </div>
      </div>
    )
  }
}