antd_multiform_getallfieldvalue.jsx

const { Form, Card, Input, Button, Row, Col } = antd

const inputCount = 20
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 }
}

const createDemoForm = name => {
  return class Adapter extends React.Component {
    render() {
      const fields = Array.from(Array(inputCount).keys()).map(key => {
        const {getFieldDecorator} = this.props.form
        return (
          <Row key={key}>
            <Form.Item label={`${name}-${key}`} {...formItemLayout}>
              {getFieldDecorator(`${name}-${key}`)(<Input/>)}
            </Form.Item>
          </Row>
        )
      })
      return (
        <Card title={`Form${name}`}>
          <Form>
            {fields}
          </Form>
        </Card>
      )
    }
  }
}

const FormA = Form.create()(createDemoForm('A'))
const FormB = Form.create()(createDemoForm('B'))
const FormC = Form.create()(createDemoForm('C'))
const FormD = Form.create()(createDemoForm('D'))
const FormE = Form.create()(createDemoForm('E'))
const FormF = Form.create()(createDemoForm('F'))

const flatten = arr => {
  return arr.reduce((acc, value) => {
    const newFields = Object.assign({}, acc.fields, value.fields)
    const newErrs = Object.assign({}, acc.errs, value.errs)
    return Object.assign(acc, {fields: newFields}, {errs: newErrs})
  })
}

class MyForm extends React.Component {
  constructor() {
    super()
    this.state = {
      fields: {}, // 存放所有fieldsValue
      errs: {},   // 存放所有error
    }
  }
  getAllFieldsValue() {
    Promise.all([
      ::this.getSubFormValue('formA'),
      ::this.getSubFormValue('formB')
    ]).then(result => {
      console.log(flatten(result))
    })
  }
  getSubFormValue(formName) {
    return new Promise(resolve => {
      this[formName].validateFields((errs, fields) => {
        resolve({errs, fields})
      })
    })
  }
  render() {
    return (
      <div>
        <Row>
          <Button
            type="primary"
            onClick={::this.getAllFieldsValue}
          >getAllFieldsValue</Button>
        </Row>
        <Row gutter={8}>
          <Col span={4}><FormA ref={formA => {this.formA = formA}}/></Col>
          <Col span={4}><FormB ref={formB => {this.formB = formB}}/></Col>
          <Col span={4}><FormC ref={formC => {this.formC = formC}}/></Col>
          <Col span={4}><FormD ref={formD => {this.formD = formD}}/></Col>
          <Col span={4}><FormE ref={formE => {this.formE = formE}}/></Col>
          <Col span={4}><FormF ref={formF => {this.formF = formF}}/></Col>
        </Row>
      </div>
    )
  }
}

ReactDOM.render(<MyForm />, document.getElementById('container'))