基於React的表單開發的分析上

本文主要講解後台系統與表單相關的頁面開發，並分析如何才能更好地、高效地開發。

antd

以下我都將ant design 簡稱為 antd

ant design是個服務於企業級產品的ui框架，主要可以用於中後台系統,它有基於react、vue和angular的實現。個人感覺antd還是很強大的,api相當完善、全面，基本能實現你想要的各種功能。

表單

在開發普通的後台系統時,開發得最多的就是實體的新建、編輯和詳情頁面，這三個頁面有共通之處，也有不同之處，感覺有可以復用的地方，但是有些地方又需要特殊處理。

表單頁如圖:

詳情頁如圖:

新建、編輯、詳情頁與form表單元件的關係

從上面的幾個圖中我們看出:

通過上面的調研，我們可以考慮把詳情頁、新建和編輯做成單獨的頁面，但是新建和編輯復用同乙個form元件，form元件進行資料收集、展示、表單校驗，額外的邏輯處理(比如新建、編輯的提交動作、跳轉頁面和資料過濾)可能會有不同，所以在新建、編輯頁面進行分別的處理。

ok,我們看看form表單**實現: 更多詳情看這裡

this.handlesubmit}>
label="e-mail"
>
, ],
})()}
formitem>
"password"
>
, ],
})(type="password" />
)}formitem>
...複製**

上面的**是利用antd表單實現的，這裡會有一些問題:

每個控制項都要寫formitem和getfielddecorator,會出現多次，而且格式一致

"e-mail"
>
, ],
})()}
formitem>
複製**


]}複製**

如下圖，有個合同的form表單，我們按照型別做如下拆分:

詳情頁也能復用這個元件具有可擴充套件性(比如antd的api的方法在此元件中均能使用)

後台系統中我們開發的大部分頁面都是表單頁（新建、編輯、詳情），少部分是列表頁，我們應該多考慮路由劃分、資料層設計、業務元件拆分、公用元件設計與實現，如果這些方面做好了，積累一定的經驗，以後開發後台系統一定會事半功倍。

tip: 我準備在下期再詳細講解上面提到的表單公用元件的設計與實現。

下一期: => 基於react的表單開發的分析(下)

ant.design/components/…

基於React的表單開發的分析 上