react+antd系列之Form表單(1)：添加與刪除

在用antd的時候，咱們若是要對錶單進行添加和刪除該怎麼弄呢，以下：

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

  // 表單提交
  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),
    });



  }

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

  const listContent = list.map((item, index) => {
    return (
      <FormItem label='名稱：' key={index}>
      {getFieldDecorator(`content[${index}].name`, {
         rules: [{
         required: true,
         message: "名稱不能爲空！",
         }],
      })(
         <Input placeholder="請輸入名稱" style={{ width: '60%', marginRight: 8 }} />
      )}

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


      </FormItem>
    );
  });


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

        {listContent}
        <FormItem>
          <Button type="primary" htmlType="submit">提交</Button>
          <Button type="primary" style={{ marginLeft: '10px' }} onClick={add}>增長</Button>
        </FormItem>
      </Form>

    </div>
  );
}


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

這裏不只能對錶單進行增長和刪除，還能對錶單進行驗證，看是否有輸入，以上是自己沒有數據的狀況，若是是有數據的狀況以下：

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 (
      <FormItem label='名稱：' key={index}>
      {getFieldDecorator(`content[${index}].name`, {
         rules: [{
         required: true,
         message: "名稱不能爲空！",
         }],
         initialValue: item.name || ''
      })(
         <Input placeholder="請輸入名稱" style={{ width: '60%', marginRight: 8 }} />
      )}

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


      </FormItem>
    );
  });


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

        {listContent}
        <FormItem>
          <Button type="primary" htmlType="submit">提交</Button>
          <Button type="primary" style={{ marginLeft: '10px' }} onClick={add}>增長</Button>
        </FormItem>
      </Form>

    </div>
  );
}


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

通常若是自己有數據，都會有每行數據的id，可是這個id不顯示，咱們都會用getFieldDecorator給id聲明，這樣在咱們提交表單的時候，就能夠獲得表單抓取到id的數據，有數據跟沒有數據的差異就是，有數據須要在表單getFieldDecorator的時候給一個初始值，其餘二者都同樣

具體代碼下載地址：https://gitee.com/hope93/antd...