簡介antd v3版本升級到v4

1.getFieldDecorator的廢棄

之前v3版本的寫法如下所示,在v4中整改了這種寫法,v3中的getFieldDecorator是用于和表單進行雙向綁定,原文檔中是這種寫法==getFieldDecorator(id, options)?==,id表示控件的唯一標識,options是表示getFieldDecorator里面的屬性,下面的例子中的initialValue是getFieldDecorator的屬性之一,表示表單域的默認值,rules屬性表示校驗規(guī)則,required表示是否必填,當(dāng)需要必填時,設(shè)置required:true


在v4版本中,廢棄了這種寫法,改成了以下的方式,默認值提到父元素form中,以避免同名字段設(shè)置?initialValue?的沖突問題



2.v4 的 Form 不再需要通過?Form.create()?創(chuàng)建上下文

v3的寫法如2-1所示,v4不再需要通過?Form.create()?創(chuàng)建上下文,見2-2

2-1


2-2

3.調(diào)用form方法調(diào)整

Form 自帶表單控制實體,如需要調(diào)用 form 方法,可以通過?Form.useForm() /React.createRef()創(chuàng)建 Form 實體進行操作,v4中如果你是3-1的寫法,用Form.useForm()來獲得form實體,具體見3-2,若你是3-3的寫法用React.createRef()獲得form實體,具體見3-4


3-1


3-2


3-3


3-4

4.onFinish 替代 onSubmit

v3中的提交驗證,onSubmit要手動觸發(fā)validateFields(見4-1),v4中改成onFinish,該事件是驗證通過的時候才執(zhí)行(見4-2)

4-1


4-2

5. validateFieldsAndScroll方法的廢棄

v3的validateFieldsAndScroll方法,是將成功與失敗聚合在一起的(見5-1),v4中是將成功與失敗拆分成了兩個方法(見5-2),onFinish方法本身就是驗證成功之后執(zhí)行的函數(shù),所以不必再驗證失敗的情況,若想失敗的時候執(zhí)行另一套邏輯,只需在Form中再添加一個onFinishFailed函數(shù)將邏輯寫入onFinishFailed函數(shù)中即可

5-1


6.嵌套字段路徑使用數(shù)組

在v3中的寫法是以"."的形式書寫(見6-1),v4中更改了以數(shù)組的形式呈現(xiàn)(見6-2)

6-1


6-2
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容