描述：
如下图，在表单中，根据后台返回值确定行数，每一行都是一个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方便

过年篇：昨天我弟被逼着相亲了，回来苦瓜脸，洗洗就睡了。我妈说成了，就定亲结婚。我在那笑，我妈说你要是敢拆台，他没事，你就有事了，慌了。

描述：
如下图，最终形式
testQuestionOptionList:[
		{ quesOption: '1', flag: 'A'},
		{ quesOption: '2', flag: 'B'}
]


参考：根据 ant design 官网案例 表单的数据存储到上层组件 有疑问请参考官网
import React, { PureComponent, Fragment } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { Card, Table, Tabs, Form, message, DatePicker , Input, Select, Button ,Divider,Modal ,Pagination ,Icon ,Upload ,Popconfirm} from 'antd';
import FooterToolbar from '../../../components/FooterToolbar';

import { emptyVal, defaultPageSize ,img ,API} from '../../../utils/utils';
let obj = {};              //重要!!!!!
const FormItem = Form.Item;
const TabsPane = Tabs.TabPane;
const { Option } = Select;
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 3 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 21 },
  },
};

@connect(({ testQuestions, loading ,}) => ({
  testQuestions,
  loading: loading.models.testQuestions,
  submitting: loading.effects['form/submitAdvancedForm'],
}))
@Form.create()
export default class EditArticle extends PureComponent {
  state = {
    testQuestionOptionList:[{quesOption:'',flag:'A'}],//存选项 重要!!!!!
    eg:['A','B','C','D'],//限制最多录四个
    page:1,
    id:'',

  };

  componentDidMount() {
    const { testQuestions: { txt } } = this.props;
    if(txt&&txt.testQuestionOptionList.length !=0){
      this.setState({
        testQuestionOptionList:txt.testQuestionOptionList
      })
    }
    
  }

  handleCancel = (e) => {
    const { popHide } = this.props
    popHide()
  }

  onValidateForm = () => {
    const { validateFields } = this.props.form;
    const { popHide , editId} = this.props
    
    validateFields((err, values) => {
      if(editId){
        values.id = editId
      }
      values.testQuestionOptionList = this.state.testQuestionOptionList
      if (!err) {
        this.props.dispatch({
          type: 'testQuestions/newOne',
          payload: values,
        }).then(()=>{
          this.props.form.resetFields() 
          popHide()
          this.props.dispatch({
            type: 'testQuestions/getQuestionList',
            payload: {
              rows: defaultPageSize,
              page: 1,
            },
          });
        })
      }
    });
  }

  //录入问题答案-开始
  handleFormChange = (changedFields ,val) => {      //重要!!!!!
  	//内层表单，根据操作的form的index，修改并赋值对应的input
  	//val 即 当前操作form的index ，changedFields  即 当前操作form的input
    const { testQuestionOptionList } = this.state   
    let testQuestionOptionListArr = testQuestionOptionList
     if(changedFields['quesOption']){ 
      obj['index'+val]={ quesOption:changedFields['quesOption'].value ,flag:changedFields['quesOption'].flag}
     }
     testQuestionOptionListArr[val] = {...testQuestionOptionListArr[val] ,...obj['index'+val]} 
    this.setState({
      testQuestionOptionList:testQuestionOptionListArr
    })
    console.log(testQuestionOptionListArr)
  }
  remove=(index)=>{
    console.log('del',index)
    const { testQuestionOptionList } = this.state
    let arr = [...testQuestionOptionList]
    arr.splice(index,1)
    this.setState({
      testQuestionOptionList:arr
    })
  }
  add=(index)=>{
    //testQuestionOptionList:[{quesOption:''}],
    
    const { testQuestionOptionList ,eg} = this.state
    let arr = [...testQuestionOptionList]
    if(arr.length>=4){
      message.info('最多四个！')
      return false
    }
    arr.push({quesOption:'',flag:eg[arr.length]})
    this.setState({
      testQuestionOptionList:arr
    })
    console.log('add',testQuestionOptionList)
  }
  //录入问题答案-结束


  render() {
    const { testQuestions: { data ,txt }, loading, form } = this.props;
    const { validateFields ,getFieldDecorator} = form;
    const { testQuestionOptionList ,eg} = this.state;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
        //录入问题 -开始
        const CustomizedForm = Form.create({            //重要!!!!!    
          onFieldsChange(props, changedFields) {
            props.onChange(changedFields);
          },     
          mapPropsToFields(props) {           
            const { index } = props
            console.log(eg[index]) 
            return {
              quesOption: Form.createFormField({
                  value: props.quesOption,
                  flag:eg[index]
                }),
                
            };
          },
          onValuesChange(_, values) {
            console.log(values);
          },
        })((props) => {
          const { getFieldDecorator } = props.form;
          const { index } = props
          return (
              <Form >
                  <Form.Item label='选项' {...formItemLayout}>
                    {getFieldDecorator('quesOption', {
                      rules: [{ required: true, message: 'quesOption is required!' }],
                    })(<Input style={{width:'95%'}}/>)}
                    {testQuestionOptionList.length > 1&&index>0 ? (
                      <Icon
                        className="dynamic-delete-button"
                        type="minus-circle-o"
                        style={{ fontSize: '20px' ,position:'absolute',top:'-1px',marginLeft:'10px'}}
                        disabled={testQuestionOptionList.length === 1}
                        onClick={() => this.remove(index)}
                      />
                    ) : (
                      <Icon
                        className="dynamic-delete-button"
                        type="plus-circle-o"
                        style={{ fontSize: '20px' ,position:'absolute',top:'-1px',marginLeft:'10px'}}
                        disabled={testQuestionOptionList.length === 1}
                        onClick={() => this.add(index)}
                      />
                    )}
                  </Form.Item>
    
              </Form>
          );
        });
        //录入问题-结束

    return (
      <div>
        <Card bordered={false}>
            <Form onSubmit={this.onValidateForm}>
            <Form.Item label='问题标题' {...formItemLayout}>
              {getFieldDecorator('question', {
                rules: [{ required: true, message: '请输入' }],
                initialValue:txt?txt.testQuestion.question:'' ,
              })(
                <Input></Input>
              )}
            </Form.Item>
            { //循环加载内层 From
              testQuestionOptionList.map((item,i)=>(<CustomizedForm {...item} index = {i} onChange={(e)=>this.handleFormChange(e,i)} />))
            }
            <Form.Item label='正确答案' {...formItemLayout}>
              {getFieldDecorator('answerFlag', {
                rules: [{ required: true, message: '请输入' }],
                initialValue:txt?txt.testQuestion.answerFlag:'',
              })(
                <Select>
                  {testQuestionOptionList.map((item)=>(<Option value={item.flag}>{item.flag}</Option>))}
                </Select>
              )}
            </Form.Item>
            <Form.Item label='答案解析' {...formItemLayout}>
              {getFieldDecorator('analysis', {
                rules: [{ required: true, message: '请输入' }],
                initialValue:txt?txt.testQuestion.analysis:'' ,
              })(
                <Input></Input>
              )}
            </Form.Item>
            <Form.Item label='问题类型' {...formItemLayout}>
              {getFieldDecorator('type', {
                rules: [{ required: true, message: '请输入' }],
                initialValue:txt?txt.testQuestion.type+'':'',
              })(
                <Select>
                  <Option value="1">文章类问题</Option>
                  <Option value="2">测试类问题</Option>
                </Select>
              )}
            </Form.Item>

            <div span={24} style={{ textAlign: 'right' }}>
              <Button type="primary" onClick={this.handleCancel} offset={16}>返回</Button>
              <Button type="primary" onClick={this.onValidateForm} style={{ marginLeft: 8 }} offset={20}>提交</Button>
            </div>

          </Form>
        </Card>
      </div>
    );
  }
}


没有了：
结尾：后台服务启动了，不说了，改需求去了。

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 (
window.open(props.invoiceurl)}/>
{getFieldDecorator('invoicedate', {
rules: [{ required: true, message: 'invoicedate is required!' }],
})(
format="YYYY-MM-DD"
placeholder="请选择"
disabledDate={this.disabledDate}
/>
)}
{getFieldDecorator('nainvoiceqtyme', {
rules: [{ required: true, message: 'nainvoiceqtyme is required!' }],
})()}
{getFieldDecorator('invoiceno', {
rules: [{ required: true, message: 'invoiceno is required!' }],
})()}
{getFieldDecorator('invoicesource', {
rules: [{ required: true, message: 'invoicesource is required!' }],
})(
门诊
住院
药店
)}
);
});
return (
 //外层From购药发票记录：{}发票购药日期购药支数凭证号码来源
{ //循环加载内层 From
invoice.map((item,i)=>(this.handleFormChange(e,i)} />))
}
返回
提交
);
}
}

只是做个笔记记录下
在一些项目中会出现动态数据的存储,例如存储某个房屋租客信息,有时候一个房屋有一个租客也有可能有两个、三个、四个。
平常在数据库中会用一个字段来存储一个方便读取和处理，那么如果有一百个岂不是要一百个字段？
用数组表单提交数据，处理转化为序列化数据存入一个字段中


表单中模板


<input type="text" name="zk[name]">
<input type="text" name="zk[phone]">




<input type="text" name="zk[name2]">
<input type="text" name="zk[phone2]">


<input type="text" name="zk[name3]">
<input type="text" name="zk[phone3]">

提交后的数据数组格式array：


var_dump($_POST ); 既可查看到post过来的数组 ,
当然了html中也可以使用二维数组 <input type="text" name="zk[phone3][truename]"> <input type="text" name="zk[phone3][nickname]">


"zk"=>{
'name'=>xxxx,
'phone'=>xxxx,

'name2'=>xxxx,
'phone2'=>xxxx,

'name3'=>xxxx,
'phone3'=>xxxx,
}


最后再把zk这个数组序列化(a:3:{s:1:"s";d:0;s:1:"d";d:0;s:1:"r";d:0;})或是转换成json存储在字段中,读取的时候逆向转换为数组既可


最好建议是序列化,毕竟json转换成array麻烦,当然了还是看需求情况