需求:现有一个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里的内容组件的更多相关文章

  1. dwz的form表单中url的变量替换

    form表单中action的地址格式 “__URL__/edit/{xxx}”,大括号内的 “xxx” 就是变量名,主要功能是结合table组件一起使用. 下图中的删除.编辑.修改密码都是用了url变 ...

  2. 表单中<form>的enctype属性

    application/x-www-form-urlencoded.multipart/form-data.text/plain 上传文件的表单中<form>要加属性enctype=&qu ...

  3. form表单中enctype="multipart/form-data"的传值问题

    form表单中enctype="multipart/form-data"的传值问题!! Form表单中enctype="multipart/form-data" ...

  4. jquery禁用form表单中的文本框

    //禁用form表单中所有的input[文本框.复选框.单选框],select[下拉选],多行文本框[textarea] function disableForm(formId, isDisabled ...

  5. jQuery中设置form表单中action的值的方法

    下面介绍在jQuery中设置form表单中action的值的方法. $("#myFormId").attr("action", "userinfo.s ...

  6. jQuery中设置form表单中action值与js有什么不同。。。。

    jQuery中设置form表单中action值与js有什么不同.... HTML代码如下: <form action="" method="post" i ...

  7. jsp中的form表单中的 id和name有什么区别了

    <form action="./system/WebServer_webServerLogin" method="post" id="login ...

  8. Form表单中的action路径问题,form表单action路径《jsp--->Servlet路劲问题》这个和上一个《jsp--->Servlet》文章有关

    Form表单中的action路径问题,form表单action路径 热度5 评论 50 www.BkJia.Com  网友分享于:  2014-08-14 08:08:01     浏览数44525次 ...

  9. Form表单中method为get和post的区别

    序,form表单中的方法分为get和post,但你都知道他们之间的区别吗? Form表单中method为get和post的区别: 例子如下,有个Form表单. <form action=&quo ...

随机推荐

  1. Spark面试题(八)——Spark的Shuffle配置调优

    Spark系列面试题 Spark面试题(一) Spark面试题(二) Spark面试题(三) Spark面试题(四) Spark面试题(五)--数据倾斜调优 Spark面试题(六)--Spark资源调 ...

  2. [atARC124F]Chance Meeting

    为了方便,不妨先将$n$和$m$都减小1,其意义即为移动的次数 注意到老鼠向下移动和猫向上移动对于第2个条件是等价的,对于第1个条件即要求都恰好移动$n$次,那么对应的方案数即为${2n\choose ...

  3. [loj2469]最小方差生成树

    2018年论文题 约定:令点集$V=[1,n]$.边集$E=[1,m]$,记$m$条边依次为$e_{i}=(x_{i},y_{i},c_{i})$(其中$1\le i\le m$),将其按照$c_{i ...

  4. 应用程序池自动停止,事件查看器报错6D000780

    20210913 今天中午网站突然报错,后台程序无法访问,503错误. 调查发现"应用程序池"被关闭,但是手动开启后不久,又被关闭. 本地调试没问题,所以一开始怀疑是服务器或者Ng ...

  5. js offset系列属性

    offsetParent:返回该元素有定位的父级,如果父级都没有定位则返回body offsetTop:返回元素相对父级(带有定位的父级)上方的偏移 offsetLeft:返回元素相对父级(带有定位的 ...

  6. Codeforces 1500D - Tiles for Bathroom(贪心+队列)

    Codeforces 题面传送门 & 洛谷题面传送门 首先先讲一发我的 \(n^2q\log n\) 的做法,虽然没有付诸实现并且我也深知它常数巨大过不去,但是我还是决定讲一讲(大雾 考虑设 ...

  7. P7091 数上的树

    题目传送门. 首先将 \(n\) 分解质因数,用 DFS 求出 \(n\) 的所有因数,记为 \(d_1,d_2,\cdots,d_c\),跑一遍反素数那题的代码可知 \(c\leq 23327\)( ...

  8. Markdown—.md文件是什么?怎么打开?

    md全称markdown,markdown也是一种标记语言. md文件其实可以用常用的文本编辑器都可以打开.   用记事本打开,把markdown文件拖到记事本图标上就可以打开 .   用 subli ...

  9. mysql 索引的注意事项

    mysql 无法使用索引的查询 索引是什么,为什么要用索引,索引使用的时候要注意什么,那些情况下索引无法起作用. 1,索引是什么 mysql的索引也是一张表,并且是一个有序的表,主要记录了需要索引的数 ...

  10. 8.深入TiDB:解析Hash Join实现原理

    本文基于 TiDB release-5.1进行分析,需要用到 Go 1.16以后的版本 我的博客地址:https://www.luozhiyun.com/archives/631 所谓 Hash Jo ...