NO.2 FormList 極簡用法
FormList是為了表單種具有多數(shù)據(jù)Array形式(類似批量)初斑，話不多說辛润，直接盜圖！
image.png
import React from "react";
import { Form, Input, Row, Col, Button } from "antd";
//initalValue.files 有一元素 可直接顯示一行樣式 可以實驗性看下樣式
//可以看到 { add , remove } 暴漏的這兩個方法顯而易見可用來添加刪除項
//可各種組合 華山論劍
export default () => (
<Form initialValues={{ files : [{ file : '' , name : '' }] }}>
<Form.Item label="文件">
<Form.List name="files">
{
( fields , { add, remove }) => fields.map(
field => (
<>
<Row key={ field.key }>
<Col span={ 11 }>
<Form.Item name={[ field.name , 'file']}>
<Input />
</Form.Item>
</Col>
<Col span={ 11 }>
<Form.Item name={[ field.name , 'name']}>
<Input />
</Form.Item>
</Col>
<Col span={ 2 } onClick={ remove( field.name ) }>x</Col>
</Row>
<Row>
<Button onClick={ add( field.name ) }>添加一行</Button>
</Row>
</>
)
)
}
</Form.List>
</Form.Item>
</Form>
);
如上代碼
