react+antd系列之Form表单(1)：添加与删除

Donald 发布于2019-08-23 14:08 / 1771人阅读

摘要：在用的时候，我们如果要对表单进行添加和删除该怎么弄呢，如下表单提交添加删除名称名称不能为空请输入名称删除提交增加这里不仅能对表单进行增加和删除，还能对表单进行验证，看是否有输入，以上是本身没有数据的情况，如果是有数据的情况如下表单提交添加删

在用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表单添加数据系列之系列之二

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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