坑一:
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()分別對每個表單裝飾,從而達到表單數據解耦,互不干擾,然後將各個表單取得的字段通過回調函數傳給父組件來分別接收):