ant design多表单展示和再编辑

antd_multiform_display_and_edit.jsx

const { Form, Card, Input, Button, Row, Col, Spin } = 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}>
              {
                this.props.editable ?
                getFieldDecorator(`${name}-${key}`, {
                  initialValue: this.props.originData[`${name}-${key}`]
                })(<Input/>)
                :
                <span>{this.props.originData[`${name}-${key}`] || '--'}</span>
              }
            </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 mockData = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        "A-0": "I'm A-0's value",
        "A-1": "I'm A-1's value"
      })
    }, 2000)
  })
}

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
      loading: false,  // originData的加载状态
      editable: false, // 控制表单的展示|可编辑状态
      originData: {}   // 当表单为展示状态时，存放从服务器获取的原始数据
    }
  }
  handleEditableChange() {
    this.setState({
      editable: !this.state.editable
    })
  }
  getAllFieldsValue() {
    Promise.all([
      ::this.getSubFormValue('formA'),
      ::this.getSubFormValue('formB'),
      ::this.getSubFormValue('formC'),
      ::this.getSubFormValue('formD'),
      ::this.getSubFormValue('formE'),
      ::this.getSubFormValue('formF')
    ]).then(result => {
      console.log(flatten(result))
    })
    this.setState({editable: false})
  }
  getSubFormValue(formName) {
    return new Promise(resolve => {
      this[formName].validateFields((errs, fields) => {
        resolve({errs, fields})
      })
    })
  }
  componentDidMount() {
    this.setState({loading: true})
    mockData()
    .then(data => {
      this.setState({
        originData: data,
        loading: false
      })
    })
  }
  render() {
    return (
      <div>
        <Row>
          <Button
            type="primary"
            onClick={::this.getAllFieldsValue}
          >getAllFieldsValue</Button>
          {
            this.state.editable ?
            <Button
              icon="save"
              onClick={::this.getAllFieldsValue}
            >save</Button>
            :
            <Button
              icon="edit"
              onClick={::this.handleEditableChange}
            >edit</Button>
          }
        </Row>
        <Row gutter={8}>
          <Spin spinning={this.state.loading}>
          <Col span={4}>
            <FormA
              editable={this.state.editable}
              originData={this.state.originData}
              ref={formA => {this.formA = formA}}
            />
          </Col>
          <Col span={4}>
            <FormB
              editable={this.state.editable}
              originData={this.state.originData}
              ref={formB => {this.formB = formB}}
            />
          </Col>
          <Col span={4}>
            <FormC
              editable={this.state.editable}
              originData={this.state.originData}
              ref={formC => {this.formC = formC}}
            />
          </Col>
          <Col span={4}>
            <FormD
              editable={this.state.editable}
              originData={this.state.originData}
              ref={formD => {this.formD = formD}}
            />
          </Col>
          <Col span={4}>
            <FormE
              editable={this.state.editable}
              originData={this.state.originData}
              ref={formE => {this.formE = formE}}
            />
          </Col>
          <Col span={4}>
            <FormF
              editable={this.state.editable}
              originData={this.state.originData}
              ref={formF => {this.formF = formF}}
            />
          </Col>
          </Spin>
        </Row>
      </div>
    )
  }
}

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