最近使用antd UI 的表单提交数据,数据里面有的是数组,有的是对象。提交的时候还要去校验参数,让人非常头疼。在我仔细看完文档之后,发现 antd 的 form 组件做的非常不错,这些需求通通不是问题。现在来总结一下。

  • 如图所示,提交的表单信息 有需要填写多个的东西。数据类型为:数组(Array)

那么数组格式怎么用 form 组件来渲染呢?

Form.List

  • 现在我们来自定义一个表单属性为一个数组的表单数据。
import { useState } from "react";
import { Button, Col, Form, Input, Row } from "antd";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons"; function validator(_, val) {
if (!val) {
return Promise.reject(new Error("添加的价格为必填项!"));
}
if (!/^\d+$/.test(val) || val <= 0) {
return Promise.reject(new Error("价格必须为数字且大于0"));
}
return Promise.resolve();
}
function validators(_, vals) {
console.log(vals);
if (!vals || vals.length === 0) {
return Promise.reject("请填写价格!");
}
return Promise.resolve();
}
export default function MyForm() {
const [formInstance] = Form.useForm();
const submit = () => {
// 点击 验证表单信息
formInstance.validateFields().then((vals) => {
console.log(vals);
});
};
return (
<Form form={formInstance} labelCol={{ span: 2 }} wrapperCol={{ span: 6 }}>
<Form.List name="price" rules={[{ validator: validators }]}>
{(fields, { add, remove }, { errors }) => (
<div>
{fields.map((field) => {
return (
<Form.Item
{...field}
key={field.name}
rules={[{ validator: validator }]}
validateTrigger={["onChange", "onBlur"]}
>
<Input
suffix={
<MinusCircleOutlined onClick={() => remove(field.name)} />
}
/>
</Form.Item>
);
})}
<Row style={{ marginBottom: 20 }}>
<Button
type="dashed"
{/* 点击添加列 */}
onClick={() => {
add();
}}
icon={<PlusOutlined />}
>
添加价格
</Button>
</Row>
{/* formList 的 验证报错信息 */}
<Form.ErrorList errors={errors} />
</div>
)}
</Form.List>
<Row>
<Button type="primary" onClick={submit}>
submit
</Button>
</Row>
</Form>
);
}
  • 点击表单提交的时候会验证 Form.List 和 子节点的 Form.Item 。前提是节点上有rules,提交的数据为数组格式。如图

自定义表单组件,在 Form.Item 组件下使用。

Form.Item子节点的props接收两个参数:value,onChange

props 类型 描述
value any 表单对应的Form.Itemname的值。
onChange function 修改表单属性值。
// 因为 定义的 value 是 包含 fisrt,last属性所以使用Object类型。默认空对象
function Name({ value = {}, onChange }) {
const [first, setFirst] = useState(null);
const [last, setLast] = useState(null);
// 值改变就调用 onChange 因为使用的是对象所以调用的时候传对象。
const triggerChange = (checkVal) => {
onChange &&
onChange({
first: first,
last: last,
...value,
...checkVal,
});
};
const firstChange = (e) => {
const val = e.target.value;
setFirst(val);
triggerChange({ first: val });
};
const lastChange = (e) => {
const val = e.target.value;
setLast(val);
triggerChange({ last: val });
};
return (
<Row justify="center">
<Col span={12}>
<Input
placeholder="first name"
value={value.first || first}
onChange={firstChange}
/>
</Col>
<Col span={12}>
<Input
placeholder="last name"
value={value.last || last}
onChange={lastChange}
/>
</Col>
</Row>
);
}
// 在上面的 MyForm组件上追加一点内容
function MyForm() {
// .... 此内容不变
return (
<Form form={formInstance} labelCol={{ span: 2 }} wrapperCol={{ span: 6 }}>
{/* .... ... 忽略上面的 Form.List*/}
<Form.Item name="username" label="username">
<Name />
</Form.Item>
<Row>
<Button type="primary" onClick={submit}>
submit
</Button>
</Row>
</Form>
);
}
  • 若需要使用表单验证自定义组件的值,在Form.Item上添加rules,使用validator函数来自定义校验规则。

使用 antd 的 form 组件来自定义提交的数据格式的更多相关文章

  1. React利用Antd的Form组件实现表单功能(转载)

    一.构造组件 1.表单一定会包含表单域,表单域可以是输入控件,标准表单域,标签,下拉菜单,文本域等. 这里先引用了封装的表单域 <Form.Item /> 2.使用Form.create处 ...

  2. form表单post提交的数据格式

    1.浏览器行为:Form表单提交 action:url 地址,服务器接收表单数据的地址 method:提交服务器的http方法,一般为post和get name:最好好吃name属性的唯一性 enct ...

  3. Django框架之Ajax和form组件

    一.Django框架之查漏补缺 1)models,字段概况 name = models.CharField(max_length=) age = models.IntegerField() price ...

  4. python---django中form组件(数据添加前使用自定义方法<django预留扩展点3个>进行验证,以及源码分析)

    form组件代码: from app02.models import Userfrom django.core.exceptions import ValidationError class Ajax ...

  5. Django框架 之 form组件

    Django框架 之 form组件 浏览目录 Form介绍 普通的登录 使用form组件 Form详情 常用字段 校验 进阶 使用Django Form流程 一.Form介绍 我们之前在HTML页面中 ...

  6. day12 form组件

    day12 form组件 今日内容 form组件前戏 form组件基本定义 form组件数据校验功能 form组件渲染标签 form组件提示信息 数据校验进阶 form组件补充 form组件源码探索 ...

  7. 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件

    实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...

  8. 封装react antd的form表单组件

    form表单在我们日常的开发过程中被使用到的概率还是很大的,比如包含了登录.注册.修改个人信息.新增修改业务数据等的公司内部管理系统.而在使用时这些表单的样式如高度.上下边距.边框.圆角.阴影.高亮等 ...

  9. django 使用form组件提交数据之form表单提交

    django的form组件可以减少后台在进行一些重复性的验证工作,极大降低开发效率. 最近遇到一个问题: 当使用form表单提交数据后,如果数据格式不符合后台定义的规则,需要重新在前端页面填写数据. ...

随机推荐

  1. Nginx反向代理访问内网服务器

    Nginx反向代理访问内网服务器 问题描述 ​ 公司给配的台式机太垃圾了,不能访问外部网络就算了,还没有maven私服.近期项目不光得使用maven还得使用内网中的数据库之类,台式机太卡只能用自己的笔 ...

  2. git 强推本地分支覆盖远程分支

    git 强推本地分支覆盖远程分支git push origin 分支名 --force

  3. 第二篇 -- Django写一个接口并用Jmeter进行测试

    第一节学习了Jmeter的下载和安装,那么第二节就来看看具体怎么使用. 本篇介绍的是使用Jmeter进行http接口测试,那么接口程序使用Django开发的一个小接口. 一.Django编写接口 这一 ...

  4. 【阅读笔记】Java核心技术卷一 #2.Chapter4

    4 对象和类 4.1 面向对象程序设计概述(略) 4.2 使用预定义类 java.time.LocalDate static LocalDate now(); static LocalDate of( ...

  5. DC-3靶机

    仅供个人娱乐 靶机信息 下载地址:http://www.five86.com/downloads/DC-3.zip 一.主机扫描 arp-scan -l nmap -A -p 1-65535 -sV ...

  6. AHKManager.ahk AHK管理器 2019年12月15日

    AHKManager.ahk  AHK管理器  2019年12月15日 快捷键   {Alt} + {F1} ///////////////////////////////////////////// ...

  7. SpringCloud升级之路2020.0.x版-6.微服务特性相关的依赖说明

    本系列代码地址:https://github.com/HashZhang/spring-cloud-scaffold/tree/master/spring-cloud-iiford spring-cl ...

  8. C++ //多态案例三 ---电脑组装

    1 //多态案例三 ---电脑组装 2 3 #include <iostream> 4 #include <string> 5 using namespace std; 6 7 ...

  9. LeetCode通关:哈希表六连,这个还真有点简单

    精品刷题路线参考: https://github.com/youngyangyang04/leetcode-master https://github.com/chefyuan/algorithm-b ...

  10. GO语言的基本语法之变量,常量,条件语句,循环语句

    GO语言的基本语法之变量,常量,条件语句,循环语句 作为慕课网得笔记自己看 定义变量: 使用var关键字 var a, b, C bool var s1, s2 string = "hell ...