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>
);

如上代碼