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

Donald 發布于2019-08-23 14:08 / 1799人閱讀

摘要：在用的時候，我們如果要對表單進行添加和刪除該怎么弄呢，如下表單提交添加刪除名稱名稱不能為空請輸入名稱刪除提交增加這里不僅能對表單進行增加和刪除，還能對表單進行驗證，看是否有輸入，以上是本身沒有數據的情況，如果是有數據的情況如下表單提交添加刪

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

       {index > 0 ? (
           
       ) : null}


      
    );
  });


  return (
    
        

        {listContent}
        
          
          
        
      

    
  );
}


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

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

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

GPU云服務器云服務器 js表單form添加數據類型 js往form表單添加數據系列之系列之二

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100137.html

react+antd系列之Form表單(2)：格式限制驗證

摘要：格式限制中表單的功能很多，下面就為大家整理了一下中常用的幾種表單輸入格式驗證輸入框不能為空限制，如下名稱不能為空請輸入名稱輸入框字符限制，如下字符長度范圍限制密碼不能為空密碼不能少于個字符密碼不能大于個字符請輸入密碼字符長度限制昵稱不能為空格式限制 antd中表單的功能很多，下面就為大家整理了一下antd中常用的幾種表單輸入格式驗證： 1. 輸入框不能為空限制，如下： {getF...

Caicloud 2019-08-23 14:08 評論0 收藏0
JSON生成Form表單

摘要：是校驗表單組件數據正確性的字段，其值為數組，里面的數組元素可以為。所以數組元素如果為的話，其內容就是的。到目前為止，表單適合大部分的表單應用場景。 JSON表單描述 JSON表單是一個基于React的抽象組件，它可以把JSON數據格式描述的表單轉換成項目中的表單，它可以用簡短的幾行代碼，快速的生成Form表單。JSON表單的優點是：可以快速構建出一個表單表單的數據、邏輯、視圖分...

bingchen 2019-08-26 13:22 評論0 收藏0
JSON生成Form表單（三）

摘要：嵌套組件配置如果表單組件里還含有其他表單組件，這時直接通過組件配置去渲染無疑能節約不少的工作量。請輸入方法傳入組件配置的列表就能渲染出表單組件來，需要注意的是，子表單組件的一定是基于父表單組件的。表單的實例方法請看下節的生成表單四 container表單組件在實際的項目中，JSON表單提供的表單組件是遠遠不夠的，而且提供表單組件是一件低效的事，目前Ant Design組件庫提供的表單...

Half 2019-08-23 13:39 評論0 收藏0
React+webpack+Antd從0到1開發一個todoMvc

摘要：在裝載組件之前調用會組件的構造函數。當實現子類的構造函數時，應該在任何其他語句之前調用設置初始狀態綁定鍵盤回車事件，添加新任務修改狀態值，每次修改以后，自動調用方法，再次渲染組件。可以通過直接安裝到項目中，使用或進行引用。首先我們看一下我們完成后的最終形態：TodoMvc： showImg(https://segmentfault.com/img/remote/14600000085...

sanyang 2019-08-20 14:47 評論0 收藏0
快速構建高性能表單---JSXForm

摘要：實現名稱請輸入名稱類型請輸入類型語法復雜代碼量也比較龐大，說實話，到目前為止，我也沒記住過它的那些方法，最嚴重的問題是存在比較嚴重的性能問題，當表單組件比較多的時間，頁面會卡頓。背景表單問題，不管是在 jQuery 時代，還是 Angular/React 時代，都永遠是前端工程師們的痛，但是這又是沒辦法的事情，業務需求多種多樣，對于中后臺業務而言，表單頁面和報表頁面基本上是中后臺業...

WalkerXu 2019-08-26 13:44 評論0 收藏0