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

Donald 發(fā)布于2019-08-23 14:08 / 1816人閱讀

摘要：在用的時候，我們?nèi)绻獙Ρ韱芜M(jìn)行添加和刪除該怎么弄呢，如下表單提交添加刪除名稱名稱不能為空請輸入名稱刪除提交增加這里不僅能對表單進(jìn)行增加和刪除，還能對表單進(jìn)行驗(yàn)證，看是否有輸入，以上是本身沒有數(shù)據(jù)的情況，如果是有數(shù)據(jù)的情況如下表單提交添加刪

在用antd的時候，我們?nèi)绻獙Ρ韱芜M(jìn)行添加和刪除該怎么弄呢，如下：

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 (
      
      {getFieldDecorator(`content[${index}].name`, {
         rules: [{
         required: true,
         message: "名稱不能為空！",
         }],
      })(
         
      )}

       {index > 0 ? (
           
       ) : null}


      
    );
  });


  return (
    
        

        {listContent}
        
          
          
        
      

    
  );
}


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

這里不僅能對表單進(jìn)行增加和刪除，還能對表單進(jìn)行驗(yàn)證，看是否有輸入，以上是本身沒有數(shù)據(jù)的情況，如果是有數(shù)據(jù)的情況如下：

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

一般如果本身有數(shù)據(jù)，都會有每行數(shù)據(jù)的id，但是這個id不顯示，我們都會用getFieldDecorator給id聲明，這樣在我們提交表單的時候，就可以得到表單抓取到id的數(shù)據(jù)，有數(shù)據(jù)跟沒有數(shù)據(jù)的差別就是，有數(shù)據(jù)需要在表單getFieldDecorator的時候給一個初始值，其他兩者都一樣

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