【antd】如何自定义antd组件form表单中Form.Item里的内容组件

【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外面或者封装在自定义组件内部.