antd 动态添加表单_antd中form表单添加与删除

import React from 'react';

import { connect } from 'dva';

import { Form, Input, Button } from 'antd';

import styles from './eg2.css';

const FormItem = Form.Item;

function Page(props) {

const { form } = props;

const { getFieldDecorator, getFieldValue } = form

// 表单提交

const handleSubmit = (e) => {

e.preventDefault();

form.validateFields((err, values) => {

if (!err) {

console.log(values);

}

});

}

// 添加

const add = () => {

const list = form.getFieldValue('list');

const nextList = list.concat({});

form.setFieldsValue({

list: nextList,

});

}

// 删除

const deleteRow = (index) => {

const list = form.getFieldValue('list');

const content = form.getFieldValue('content');

if (list.length === 1) {

return;

}

form.setFieldsValue({

list: list.filter((item, key) => key !== index),

content: content.filter((item, key) => key !== index),

});

}

const slist = [{

id:'0001',

name: '黎明'

}, {

id:'0002',

name: '晴天'

}]

getFieldDecorator('list', { initialValue: slist });

const list = getFieldValue('list');

const listContent = list.map((item, index) => {

getFieldDecorator(`content[${index}].id`, {initialValue: item.id || ''})

return (

{getFieldDecorator(`content[${index}].name`, {

rules: [{

required: true,

message: "名称不能为空！",

}],

initialValue: item.name || ''

})(

)}

{index > 0 ? (

删除

) : null}

);

});

return (

{listContent}

提交

增加

);

}

const page = Form.create()(Page);

export default connect()(page);