【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外面或者封裝在自定義組件內部.