【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 ...
随机推荐
- Spark面试题(八)——Spark的Shuffle配置调优
Spark系列面试题 Spark面试题(一) Spark面试题(二) Spark面试题(三) Spark面试题(四) Spark面试题(五)--数据倾斜调优 Spark面试题(六)--Spark资源调 ...
- [atARC124F]Chance Meeting
为了方便,不妨先将$n$和$m$都减小1,其意义即为移动的次数 注意到老鼠向下移动和猫向上移动对于第2个条件是等价的,对于第1个条件即要求都恰好移动$n$次,那么对应的方案数即为${2n\choose ...
- [loj2469]最小方差生成树
2018年论文题 约定:令点集$V=[1,n]$.边集$E=[1,m]$,记$m$条边依次为$e_{i}=(x_{i},y_{i},c_{i})$(其中$1\le i\le m$),将其按照$c_{i ...
- 应用程序池自动停止,事件查看器报错6D000780
20210913 今天中午网站突然报错,后台程序无法访问,503错误. 调查发现"应用程序池"被关闭,但是手动开启后不久,又被关闭. 本地调试没问题,所以一开始怀疑是服务器或者Ng ...
- js offset系列属性
offsetParent:返回该元素有定位的父级,如果父级都没有定位则返回body offsetTop:返回元素相对父级(带有定位的父级)上方的偏移 offsetLeft:返回元素相对父级(带有定位的 ...
- Codeforces 1500D - Tiles for Bathroom(贪心+队列)
Codeforces 题面传送门 & 洛谷题面传送门 首先先讲一发我的 \(n^2q\log n\) 的做法,虽然没有付诸实现并且我也深知它常数巨大过不去,但是我还是决定讲一讲(大雾 考虑设 ...
- P7091 数上的树
题目传送门. 首先将 \(n\) 分解质因数,用 DFS 求出 \(n\) 的所有因数,记为 \(d_1,d_2,\cdots,d_c\),跑一遍反素数那题的代码可知 \(c\leq 23327\)( ...
- Markdown—.md文件是什么?怎么打开?
md全称markdown,markdown也是一种标记语言. md文件其实可以用常用的文本编辑器都可以打开. 用记事本打开,把markdown文件拖到记事本图标上就可以打开 . 用 subli ...
- mysql 索引的注意事项
mysql 无法使用索引的查询 索引是什么,为什么要用索引,索引使用的时候要注意什么,那些情况下索引无法起作用. 1,索引是什么 mysql的索引也是一张表,并且是一个有序的表,主要记录了需要索引的数 ...
- 8.深入TiDB:解析Hash Join实现原理
本文基于 TiDB release-5.1进行分析,需要用到 Go 1.16以后的版本 我的博客地址:https://www.luozhiyun.com/archives/631 所谓 Hash Jo ...