antd表單驗證的坑

坑一:

Form.Item中的表單如果是調用的react子組件,則表單驗證功能失效,請看例子:

表單父組組件:

Item組件:

這樣雖然能正常渲染出組件樣式,但是會導致submit功能Bug和resetFields功能失效,如下圖:

解決辦法:

剛開始我以爲是我哪裏寫得不對,找了很久原因,把子組件換class寫法函數寫法都試了,甚至把子組件搬到父組件同一個文件中都還是不行,最後我直接把子組件裏面的替換到調用子組件的地方,果然可行,但是這麼寫,太醜了,於是直接把調用組件方式改成調用函數的方式,這樣就解決了問題,代碼也看起來美觀。

最終其實就是將上面代碼中調用子組件的地方修改爲如下:

 

 

坑二:

開發中經常會遇到到一個Form.Item中包含兩個或多個輸入組件(如下圖這種),要使用表單驗證功能的話,一個Item中只能有一個表單,即form.getFieldDecorator定義表單字段在Form.Item中只能能有一個,並且Item中再嵌套Item的話reset清空表單也會失效

坑三:

一個頁面如果有多個表單塊並且要使用驗證功能的話,不能將多個表單寫在一個組件中,即一個組件只能有一個@Form.create(),意味着this.props.form唯一,如果一個頁面有兩個表單則會造成數據多個表單之間字段互相影響,並且提交其中一個,另一個也會提交,然而你只想提交一個。

解決方法(如下圖代碼段,將多個表單每個都抽離爲單獨組建,@Form.create()分別對每個表單裝飾,從而達到表單數據解耦,互不干擾,然後將各個表單取得的字段通過回調函數傳給父組件來分別接收):

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章