When using antd, what should we do if we want to add and delete forms, as follows:

import { connect } from 'dva';
import { Form, Input, Button } from 'antd';
import styles from './eg1.css';

const FormItem = Form.Item;

function Page(props) {
  const { form } = props;
  const { getFieldDecorator, getFieldValue } = form

  // Form submission
  const handleSubmit = (e) => {
    e.preventDefault();
    form.validateFields((err, values) => {
      if (!err) {
        console.log(values);
      }
    });

  }

  // Add to
  const add = () => {
    const list = form.getFieldValue('list');
    const nextList = list.concat({});
    form.setFieldsValue({
      list: nextList,
    });


  }

  // delete
  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),
    });



  }

  getFieldDecorator('list', { initialValue: [{}] });
  const list = getFieldValue('list');

  const listContent = list.map((item, index) => {
    return (
      <FormItem label='Name:' key={index}>
      {getFieldDecorator(`content[${index}].name`, {
         rules: [{
         required: true,
         message: "Name cannot be empty!",
         }],
      })(
         <Input placeholder="Please enter a name" style={{ width: '60%', marginRight: 8 }} />
      )}

       {index > 0 ? (
           <Button type="primary" onClick={deleteRow.bind(this, index)}>delete</Button>
       ) : null}


      </FormItem>
    );
  });


  return (
    <div className={styles.normal}>
        <Form onSubmit={handleSubmit}>

        {listContent}
        <FormItem>
          <Button type="primary" htmlType="submit">Submission</Button>
          <Button type="primary" style={{ marginLeft: '10px' }} onClick={add}>increase</Button>
        </FormItem>
      </Form>

    </div>
  );
}


const page = Form.create()(Page);
export default connect()(page);

Here, you can not only add and delete the form, but also verify the form to see if there is any input. The above situation is that there is no data in itself. If there is data, it is as follows:

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

  // Form submission
  const handleSubmit = (e) => {
    e.preventDefault();
    form.validateFields((err, values) => {
      if (!err) {
        console.log(values);
      }
    });

  }

  // Add to
  const add = () => {
    const list = form.getFieldValue('list');
    const nextList = list.concat({});
    form.setFieldsValue({
      list: nextList,
    });


  }

  // delete
  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: 'Dawn'
  }, {
    id:'0002',
    name: 'A sunny day'
  }]
  getFieldDecorator('list', { initialValue: slist });
  const list = getFieldValue('list');

  const listContent = list.map((item, index) => {
    getFieldDecorator(`content[${index}].id`, {initialValue: item.id || ''})
    return (
      <FormItem label='Name:' key={index}>
      {getFieldDecorator(`content[${index}].name`, {
         rules: [{
         required: true,
         message: "Name cannot be empty!",
         }],
         initialValue: item.name || ''
      })(
         <Input placeholder="Please enter a name" style={{ width: '60%', marginRight: 8 }} />
      )}

       {index > 0 ? (
           <Button type="primary" onClick={deleteRow.bind(this, index)}>delete</Button>
       ) : null}


      </FormItem>
    );
  });


  return (
    <div className={styles.normal}>
        <Form onSubmit={handleSubmit}>

        {listContent}
        <FormItem>
          <Button type="primary" htmlType="submit">Submission</Button>
          <Button type="primary" style={{ marginLeft: '10px' }} onClick={add}>increase</Button>
        </FormItem>
      </Form>

    </div>
  );
}


const page = Form.create()(Page);
export default connect()(page);

Generally, if there is data in itself, there will be the id of each row of data, but this id will not be displayed. We will use getFieldDecorator to declare the id, so that when we submit the form, we can get the data that the form grabs the id. the difference between data and no data is that when there is data, we need to give an initial value when the form getFieldDecorator is used, and the other two are the same

Specific code download address: https://gitee.com/hope93/antd...