使用 antd 的 form 组件来自定义提交的数据格式
最近使用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.Item 上name 的值。 |
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 组件来自定义提交的数据格式的更多相关文章
- React利用Antd的Form组件实现表单功能(转载)
一.构造组件 1.表单一定会包含表单域,表单域可以是输入控件,标准表单域,标签,下拉菜单,文本域等. 这里先引用了封装的表单域 <Form.Item /> 2.使用Form.create处 ...
- form表单post提交的数据格式
1.浏览器行为:Form表单提交 action:url 地址,服务器接收表单数据的地址 method:提交服务器的http方法,一般为post和get name:最好好吃name属性的唯一性 enct ...
- Django框架之Ajax和form组件
一.Django框架之查漏补缺 1)models,字段概况 name = models.CharField(max_length=) age = models.IntegerField() price ...
- python---django中form组件(数据添加前使用自定义方法<django预留扩展点3个>进行验证,以及源码分析)
form组件代码: from app02.models import Userfrom django.core.exceptions import ValidationError class Ajax ...
- Django框架 之 form组件
Django框架 之 form组件 浏览目录 Form介绍 普通的登录 使用form组件 Form详情 常用字段 校验 进阶 使用Django Form流程 一.Form介绍 我们之前在HTML页面中 ...
- day12 form组件
day12 form组件 今日内容 form组件前戏 form组件基本定义 form组件数据校验功能 form组件渲染标签 form组件提示信息 数据校验进阶 form组件补充 form组件源码探索 ...
- 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件
实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...
- 封装react antd的form表单组件
form表单在我们日常的开发过程中被使用到的概率还是很大的,比如包含了登录.注册.修改个人信息.新增修改业务数据等的公司内部管理系统.而在使用时这些表单的样式如高度.上下边距.边框.圆角.阴影.高亮等 ...
- django 使用form组件提交数据之form表单提交
django的form组件可以减少后台在进行一些重复性的验证工作,极大降低开发效率. 最近遇到一个问题: 当使用form表单提交数据后,如果数据格式不符合后台定义的规则,需要重新在前端页面填写数据. ...
随机推荐
- Nginx反向代理访问内网服务器
Nginx反向代理访问内网服务器 问题描述 公司给配的台式机太垃圾了,不能访问外部网络就算了,还没有maven私服.近期项目不光得使用maven还得使用内网中的数据库之类,台式机太卡只能用自己的笔 ...
- git 强推本地分支覆盖远程分支
git 强推本地分支覆盖远程分支git push origin 分支名 --force
- 第二篇 -- Django写一个接口并用Jmeter进行测试
第一节学习了Jmeter的下载和安装,那么第二节就来看看具体怎么使用. 本篇介绍的是使用Jmeter进行http接口测试,那么接口程序使用Django开发的一个小接口. 一.Django编写接口 这一 ...
- 【阅读笔记】Java核心技术卷一 #2.Chapter4
4 对象和类 4.1 面向对象程序设计概述(略) 4.2 使用预定义类 java.time.LocalDate static LocalDate now(); static LocalDate of( ...
- DC-3靶机
仅供个人娱乐 靶机信息 下载地址:http://www.five86.com/downloads/DC-3.zip 一.主机扫描 arp-scan -l nmap -A -p 1-65535 -sV ...
- AHKManager.ahk AHK管理器 2019年12月15日
AHKManager.ahk AHK管理器 2019年12月15日 快捷键 {Alt} + {F1} ///////////////////////////////////////////// ...
- SpringCloud升级之路2020.0.x版-6.微服务特性相关的依赖说明
本系列代码地址:https://github.com/HashZhang/spring-cloud-scaffold/tree/master/spring-cloud-iiford spring-cl ...
- C++ //多态案例三 ---电脑组装
1 //多态案例三 ---电脑组装 2 3 #include <iostream> 4 #include <string> 5 using namespace std; 6 7 ...
- LeetCode通关:哈希表六连,这个还真有点简单
精品刷题路线参考: https://github.com/youngyangyang04/leetcode-master https://github.com/chefyuan/algorithm-b ...
- GO语言的基本语法之变量,常量,条件语句,循环语句
GO语言的基本语法之变量,常量,条件语句,循环语句 作为慕课网得笔记自己看 定义变量: 使用var关键字 var a, b, C bool var s1, s2 string = "hell ...