fields内数组元素结构为Form.List内部定义, {key: 0, name: 0, isListField: true, fieldKey: 0}

    Form.List 在提交Form时生成一个数组包含动态录入的多行数据

    • 数组的名字为Form.List的 name属性值，name=”contacts”
    • 在 onFinish事件函数中可以获取到该数组 ```jsx import React from “react”; import { Input, Form, Col, Row, Button, Space } from “antd”; import { MinusCircleOutlined, PlusOutlined } from “@ant-design/icons”;

    const initValues = [ {usrename: ‘’, phone: ‘’} ]

    function App() { const form = Form.useForm(); const [state, setState] = React.useState(initValues)

    return (

    {(fields, { add, remove, move }) => ( <> {fields.map(({ key, name, …restField }, index) => { console.log(106, fields, index); return ( ); })}

    1.         <Item wrapperCol={{ offset: 5 }}>
    2.           <Button
    3.             type="primary"
    4.             onClick={() => add()}
    5.             icon={<PlusOutlined />}
    6.           >
    7.             新增联系人
    8.           </Button>
    9.         </Item>
    10.       </>
    11.     )}
    12.   </List>
    13. </Form>

    ); }

    3. <a name="fI34m"></a>
    4. ## Form.List
    5. Form.List就类似于 Form.Item，上面的name，同样可以被form.getFieldsValue()方法收集
    7. <a name="uShIP"></a>
    8. ## fields.map
    10. - remove删除，需要接收索引或索引数组
    11. - add 添加，接收两个参数，一个是表单的默认值，一个是表单添加的位置，也可不接收参数，默认添加到最后一个位置且表单无默认值
    12. - move 移动，必须接收两个参数 from和 to，需要注意的是，这个方法不是拖拽，是位置的直接移动（插入）
    13. ```jsx
    14. fields.map((field, index) => {
    15.   return (
    16.     <div>
    17.       <Item {...field}><Input /></Item>
    18.       <Button danger onClick={() => remove(index)}>删除</Button>
    19.       <Button onClick={() => move(index, index-1)}>上移</Button>
    20.     </div>
    21.   )
    22. })

    https://zhuanlan.zhihu.com/p/561043411