【antd】如何自定义antd组件form表单中Form.Item里的内容组件
需求:现有一个form表单,但是其中一个元素比较复杂,并不是简单的输入框或者下拉框之类的.但是我又希望能通过form.validateFields().then()去获得它的值,就不需要在当前页面写大量相关的逻辑了.
比如:如图为一个可以增删改的input列表
方案:将其封装成自动绑定值的组件
(1)form.item会给组件的props注册两个关键属性,
value:value是form.item对应的name属性的值,可用作默认值以及返显,
onChange函数.:用于监听value元素值的变化,并将其传给form.item使其可以通过相关api获得其值.
(2)注意value值不一定和页面渲染的数据相同.比如:我需要同时渲染三个input,那我页面渲染的时候需要一个数组,但是可能传给后端的时候是用","这类符合分开的.所以onCange()传递的值最好分开处理.
如:
<Form.Item name='name'>
<InputList ></InputList >
<Form.Item>
子组件InputList内部代码(简易版):
(这段代码是临时在博客中编写的,主要是展示value和onChange的功能,不确保能正确执行)
const InputList = (props)=>{
const { value ,onChange } =props //value 是form表单中"name"对应的字段值 const getValue = ()=>{
let newList = JSON.parse(JSON.stringify(value )) //深拷贝一波,防止对原数据造成影响
let value = newList .join(',')
onChange(value) }
useEffect((item,index)=>{
getValue () //传递值的时机可以自己把握,可以是点击事件也可以是其他事件
},[value.length])
return <>
{value ?.length>0 && value.map((item,index)=>{
return <div key = {index}>{item}</div> //如果组件内部有增删等功能,可以不建议用index,可以在渲染之前给每个iten绑定一个特定的key,不然会出现删除之后出现相同key,然后dom元素不重新渲染的问题
})}
</>
}
注意:1.Form表单必须要有自己的name属性,才能通过Form表单的默认值设置单个属性的,否则在子组件中value为undefined.如果是单独在Form.Item里设置默认值则无所谓.
2.一个Form.Item里面必须只有一个父元素,如果在其中放入自定义组件和一个按钮,那在子组件中完全就拿不到value属性.如果必须要按钮,则可以将按钮放在Form.Item外面或者封装在自定义组件内部.
【antd】如何自定义antd组件form表单中Form.Item里的内容组件的更多相关文章
- dwz的form表单中url的变量替换
form表单中action的地址格式 “__URL__/edit/{xxx}”,大括号内的 “xxx” 就是变量名,主要功能是结合table组件一起使用. 下图中的删除.编辑.修改密码都是用了url变 ...
- 表单中<form>的enctype属性
application/x-www-form-urlencoded.multipart/form-data.text/plain 上传文件的表单中<form>要加属性enctype=&qu ...
- form表单中enctype="multipart/form-data"的传值问题
form表单中enctype="multipart/form-data"的传值问题!! Form表单中enctype="multipart/form-data" ...
- jquery禁用form表单中的文本框
//禁用form表单中所有的input[文本框.复选框.单选框],select[下拉选],多行文本框[textarea] function disableForm(formId, isDisabled ...
- jQuery中设置form表单中action的值的方法
下面介绍在jQuery中设置form表单中action的值的方法. $("#myFormId").attr("action", "userinfo.s ...
- jQuery中设置form表单中action值与js有什么不同。。。。
jQuery中设置form表单中action值与js有什么不同.... HTML代码如下: <form action="" method="post" i ...
- jsp中的form表单中的 id和name有什么区别了
<form action="./system/WebServer_webServerLogin" method="post" id="login ...
- Form表单中的action路径问题,form表单action路径《jsp--->Servlet路劲问题》这个和上一个《jsp--->Servlet》文章有关
Form表单中的action路径问题,form表单action路径 热度5 评论 50 www.BkJia.Com 网友分享于: 2014-08-14 08:08:01 浏览数44525次 ...
- Form表单中method为get和post的区别
序,form表单中的方法分为get和post,但你都知道他们之间的区别吗? Form表单中method为get和post的区别: 例子如下,有个Form表单. <form action=&quo ...
随机推荐
- Eclipse使用JDBC方式连接SQLServer2008
JDBC_连接数据库一.配置 (一) 通过SQL Server配置管理器配置相关部分: 右键点击,启动tcp/ip协议右键点击属性查看自己的TCP端口号,记住,后面会用到右键点击SQL Server ...
- [bzoj3171]循环格
如果把这个矩阵看成一张图,题目相当于要求每一个点的入度和出度都是1(也就是有很多环),否则指向环的点就无法走回自己了将所有点拆成两个,S向原来的点流(1,0)的边,拆出来的点向T连(1,0)的边,然后 ...
- OAuth 2.1 的进化之路
背景 2010年, OAuth 授权规范 1.0 (rfc 5849) 版本发布, 2年后, 更简单易用的 OAuth 2.0 规范发布(rfc 6749), 这也是大家最熟悉并且在互联网上使用最广泛 ...
- Golang进阶,揉碎数据库中间件,干货满满!
目录 必读 一.Centos7.Mac安装MySQL 二.主从复制原理 2.1.基于binlog_filename + position 2.2.基于GTID 三.my.cnf 四.测试SQL 五.中 ...
- setoolkit的钓鱼实验
1.在kali中打开setoolkit 2.在菜单中选择第一个进入社会工程学攻击 3.选择第二个模块属于网站攻击向量 4.选择第五个模块,进行web劫持攻击 5.选择第二个,进行网站克隆 6.发现访问 ...
- Ubuntu怎么修改DNS
有时候会出现配置好网络之后,可以ping通网关却ping不通www.baidu.com orangepi@orangepi3:~$ ping 192.168.1.1 PING 192.168.1.1 ...
- BehaviorTree.CPP行为树BT的选择节点(四)
Fallback 该节点家族在其他框架中被称为"选择器Selector"或"优先级Priority". 他们的目的是尝试不同的策略,直到找到可行的策略. 它们具 ...
- CF814E An unavoidable detour for home
考虑有每个最短路只有一条. 那么我们建出最短路树后,显然所有的非树边都是同层之间的横叉边. 那么我们考虑设\(f(i,j,k,z)\)为我们考虑到了第\(i\)个点,此时他被我们分配到了\(p\)层, ...
- 数据仓库分层中的ODS、DWD、DWS
1.数据仓库DW 1.1简介 Data warehouse(可简写为DW或者DWH)数据仓库,是在数据库已经大量存在的情况下,为了进一步挖掘数据资源.为了决策需要而产生的,它是一整套包括了etl.调度 ...
- Hadoop入门 集群常用知识与常用脚本总结
目录 集群常用知识与常用脚本总结 集群启动/停止方式 1 各个模块分开启动/停止(常用) 2 各个服务组件逐一启动/停止 编写Hadoop集群常用脚本 1 Hadoop集群启停脚本myhadoop.s ...