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