ant design pro 动态表单 表单嵌套 表单的数据存储到上层组件

描述：

如下图，在表单中，根据后台返回值确定行数，每一行都是一个Form表单，提交表单时，每一行为对象`{购药日期：’ ‘，购药支数：’ ‘，号码：’ ‘，来源：’ '}，最终形式

购药发票记录：[
				{id：1，购药日期：' '，购药支数：' '，号码：' '，来源：' '},
				{id：2，购药日期：' '，购药支数：' '，号码：' '，来源：' '}
			 ]

参考：根据 ant design 官网案例 表单的数据存储到上层组件 有疑问请参考官网

import React, { PureComponent, Fragment } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { Card, Table, Tabs, Form, Col, Row, Input, Select, Button, DatePicker ,Modal ,Divider} from 'antd';
import { emptyVal, defaultPageSize ,getApproveType ,getApprovestatus} from '../../utils/utils';
import styles from './Audit.less';
import FooterToolbar from '../../components/FooterToolbar';

const FormItem = Form.Item;
const TabsPane = Tabs.TabPane;
const { Option } = Select;

 let obj = {};              //重要!!!!!

@connect(({ audit, loading }) => ({
  audit,
  loading: loading.models.audit,
  submitting: loading.effects['form/submitAdvancedForm'],
}))
@Form.create()

//线上审核组件
export default class OnlineForm extends PureComponent {
  state ={
    invoice:[],//存购药发票记录 重要!!!!!
  }
  
  componentWillReceiveProps() {
    this.setState({
      invoice:this.props.detailData&&this.props.detailData.invoiceList?this.props.detailData.invoiceList:[]
    })
  }
  
  handleLookOk =(event)=>{ //外层表单提交方法，可以不看
    const { validateFields } = this.props.form;
    const { handleLookCancel } = this.props
    event.preventDefault()
    validateFields((err, values) => {
      let val ={
        id:this.props.detailData.PresentVisitVo.id,
        data:this.state.invoice,
        token:localStorage.getItem('token')
      }
      console.log(this.props.detailData)
      console.log({...values , ...val})
      if (!err) {
        this.props.dispatch({
          type: 'audit/onlineAuditSubmit',
          payload: {...values , ...val},
        }).then(()=>{
          handleLookCancel()
          this.props.dispatch({ //线上
            type: 'audit/onlineAudit',
            payload: {
              rows: defaultPageSize,
              page: 1,
              givetype:0,
              queryType:1,
            },
          });
        })
      }
    });
  }

  handleFormChange = (changedFields ,val) => {      //重要!!!!!
  	//内层表单，根据操作的form的index，修改并赋值对应的input
  	//val 即 当前操作form的index ，changedFields  即 当前操作form的input
    const { invoice } = this.state   
    let invoiceArr = invoice
    if(changedFields['invoicedate']){ 
      obj['index'+val]={ invoicedate:changedFields['invoicedate'].value }
     }
     if(changedFields['nainvoiceqtyme']){ 
      obj['index'+val]={ nainvoiceqtyme:changedFields['nainvoiceqtyme'].value, }
     }
     if(changedFields['invoiceno']){ 
      obj['index'+val]={ invoiceno:changedFields['invoiceno'].value }
     }
     if(changedFields['invoicesource']){ 
      obj['index'+val]={ invoicesource:changedFields['invoicesource'].value }
     }
     invoiceArr[val] = {...invoiceArr[val] ,...obj['index'+val]} 
    this.setState({
      invoice:invoiceArr
    })
  }
  disabledDate=(current)=>{ //今天以前不可选择
    return current < moment().endOf('day').subtract(1, "days");
  }
  
  render(){
  //父组件传值 detailData =详情  timestampToTime = 时间转化 handleLookCancel=关闭弹窗 returnNull = 判断返回空 onlyLook = 只读
    const { detailData ,timestampToTime ,handleLookCancel ,returnNull ,onlyLook} = this.props;
    const { getFieldDecorator, getFieldValue } = this.props.form;
    const { invoice} = this.state

    const CustomizedForm = Form.create({            //重要!!!!!
    
      onFieldsChange(props, changedFields) {
        props.onChange(changedFields);
      },
      
      mapPropsToFields(props) {
        console.log(props.invoicedate) 
        return {
            invoicedate: Form.createFormField({
              value:  props.invoicedate?moment(timestampToTime(props.invoicedate), "YYYY-MM-DD"):'',
            }),
            nainvoiceqtyme: Form.createFormField({
              value: props.nainvoiceqtyme,
            }) ,
            invoiceno: Form.createFormField({
              value: props.invoiceno,
            }),
            invoicesource: Form.createFormField({
              value: props.invoicesource,
            })  ,
        };
      },
      onValuesChange(_, values) {
        console.log(values);
      },
    })((props) => {
      //此处尤为重要，添加后，表单验证由每个动态创建form自己监管。不添加由外层form监管。
      const { getFieldDecorator } = props.form; 
      return (
        <Row>
          <Form >
            <Col span={3}><img className={styles.img} src={props.invoiceurl} onClick={()=>window.open(props.invoiceurl)}/></Col>
            <Col span={5}>
              <Form.Item style={{width:'200px'}}>
                {getFieldDecorator('invoicedate', {
                  rules: [{ required: true, message: 'invoicedate is required!' }],
                })(
                  <DatePicker 
                      format="YYYY-MM-DD"
                      placeholder="请选择"
                      disabledDate={this.disabledDate}
                    />
                  )}
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item style={{width:'150px'}}>
                {getFieldDecorator('nainvoiceqtyme', {
                  rules: [{ required: true, message: 'nainvoiceqtyme is required!' }],
                })(<Input  style={{lineHeight:'80px'}}/>)}
              </Form.Item>
            </Col>
            <Col span={5}>
              <Form.Item style={{width:'200px'}}>
                {getFieldDecorator('invoiceno', {
                  rules: [{ required: true, message: 'invoiceno is required!' }],
                })(<Input />)}
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item style={{width:'200px'}}>
                {getFieldDecorator('invoicesource', {
                  rules: [{ required: true, message: 'invoicesource is required!' }],
                })(
                  <Select style={{width:'200px'}}>
                    <Select.Option value="门诊">门诊</Select.Option>
                    <Select.Option value="住院">住院</Select.Option>
                    <Select.Option value="药店">药店</Select.Option>
                  </Select>
                )}
              </Form.Item>
            </Col>
          </Form>
        </Row>
      );
    });

    return (
      <Form  onSubmit={this.handleLookOk}> //外层From
                <Row>
                  <Col span={24}><span style={{lineHeight:'40px'}}>购药发票记录：</span>{}</Col>
                </Row>
                <Row>
                  <Col span={3}>发票</Col><Col span={5}>购药日期</Col>
                  <Col span={4}>购药支数</Col><Col span={5}>凭证号码</Col><Col span={6}>来源</Col>
                </Row>
                { //循环加载内层 From
                  invoice.map((item,i)=>(<CustomizedForm {...item} onChange={(e)=>this.handleFormChange(e,i)} />))
                }
                <FooterToolbar>
                  <Button type="primary" onClick={handleLookCancel} offset={16}>返回</Button>
                  <Button type="primary" onClick={this.handleLookOk} hidden={onlyLook} offset={20}>提交</Button>
                </FooterToolbar>
            </Form>
    );
  }
}

没有了：

感受：其实感觉vue操作表单比react方便
过年篇：昨天我弟被逼着相亲了，回来苦瓜脸，洗洗就睡了。我妈说成了，就定亲结婚。我在那笑，我妈说你要是敢拆台，他没事，你就有事了，慌了。