react + antd3.x 如何在一个页面上获取多个表单的值

使用场景：

在一个页面上会用到多个表单，每个表单可以独自提交数据，也可以一起提交数据

关键词：

Form.create(options)

wrappedComponentRef

实现代码

// index.js
import { Component } from 'react';
import { Button } from 'antd' ;
import BaseForm from './baseForm;

class Demo extends React.Component {
  saveAll = () => {
    const form1 = this.formRef1.props.form;
    const form2 = this.formRef2.props.form;
    const form3 = this.formRef3.props.form;
    form1.validateFields((err, values) => {
      if (!err) {
        console.log('form1', values);
      }
    });
    form2.validateFields((err, values) => {
      if (!err) {
        console.log('form2', values);
      }
    });
    form3.validateFields((err, values) => {
      if (!err) {
        console.log('form3', values);
      }
    });
  };
  render() {
    return (
      <div>
        <BaseForm wrappedComponentRef={formRef => (this.formRef1 = formRef)} />
        <BaseForm wrappedComponentRef={formRef => (this.formRef2 = formRef)} />
        <BaseForm wrappedComponentRef={formRef => (this.formRef3 = formRef)} />
        <Button onClick={this.saveAll}>保存</Button>
      </div>
    );
  }
}

// baseForm.js
import { Component } from 'react';
import { Form, Input, Button } from 'antd';

class BaseForm extends Component {
  handleSubmit = () => {
    const { form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (!err) {
        console.log('fieldsValue', fieldsValue);
      }
    });
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form>
        <Form.Item>
          {getFieldDecorator('name', {
            rules: [
              {
                required: true,
                message: '请输入名字',
              },
            ],
          })(<Input />)}
        </Form.Item>
        <Form.Item>
          <Button onClick={this.handleSubmit}>提交</Button>
        </Form.Item>
      </Form>
    );
  }
}

export default Form.create()(BaseForm);