react ant-design 在一个页面同时使用并提交多个表单_antd一个页面多个表单

引言

我在使用react写web前端，React UI组件库是使用Ant Design。
我做的项目的一个需求是：在网页的一个页面上，同时使用多个表单，可以修改自定义表单的item(选择自己需要的 数据进行录入，并且可以删除不想要的item)，点击最顶层的按钮，可以同时提交多个表单。

效果

1. 单一表单一个组件点击Done提交：
   
   Core Config组件，按钮在组件内，点击Done，会提交本组件内的表单数据。

2. 多个表单同时使用：
   

如上图所示，一个页面有多个表单（Custom Config、task num以及per task size），这些表单同时使用，每个表单所处的组件都不一样，点击Run，会同时提交多个表单的数据。

实现

上面的所有功能，都是采用antd(Ant Design)的Form表单组件实现的。
下面的实现只是思路以及核心代码，全部代码可移步Github：

1. 单一表单提交：

   1. 引入所需的组件与库：
      Form组件是表单控件，Button是按钮，Card是卡片（我将表单包在卡片里）。
      Select是进行选择（有些items的值是True/False），Tooltip是文字提示气泡框，提醒用户输入值的类型
      

      Collapse是折叠面板，我采用三列栅格式的表单排列方式（一行展示3个item），由于items有些多，为了保持页面整洁，对items进行隐藏，点击之后全部显示。

      import { Col, Row, Form, Input, Button,Card, Collapse,Tooltip,Select } from 'antd';
      import React from 'react
      1
      2

   2. 写组件Class
      在Class中，除了初始化state，要使用form，必须有formRef=React.createRef()。formRef是使用React.createRef()创建的，并通过ref属性附加到React元素。
      这Class中主要函数是render()，在render(）中渲染展示表单数据，<Form>中应该包裹着<Form.Item>以及提交按钮<Button>。

      render(){
            return(
                <Row gutter={24} className='step-content'>
                    <Form ref={th
      1
      2
      3