【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()传递的值最好分开处理.
如:
| 1 2 3 |
<Form.Item name='name'>
<InputList ></InputList >
<Form.Item>
|
子组件InputList内部代码(简易版):
(这段代码是临时在博客中编写的,主要是展示value和onChange的功能,不确保能正确执行)
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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外面或者封装在自定义组件内部.