基于 React 打造更好用的聚合表單

Heier 發布于2019-08-26 10:37 / 2437人閱讀

摘要：前言管理后臺應用有兩個最主要的功能數據錄入表單數據展示表格業務系統必不可少的功能模塊，并且占據開發量的以上。所以我認為將業務與徹底分離，會是更好的選擇。參考聚合表單源碼聚合表單管理后臺

前言

管理后臺應用有兩個最主要的功能：

數據錄入 ---- 表單 (Form)

數據展示 ---- 表格 (Table)

業務系統必不可少的功能模塊，并且占據開發量的 80% 以上。

如何可以快速的，高質量完成對應的業務需求呢？

業務與 UI 徹底分離

術業有專攻，專注才能把事情做完美，減少出錯的概率。所以我認為將業務與 UI 徹底分離，會是更好的選擇。

例如我們實現以下表單：

一般的做法是，由開發引用 UI 庫對應組件然后渲染：

import { Form, Input, Selector } from "ui"

const Page = () => {
  return (
    
      
      
      // ...
    
  )
}

這樣問題不大，但是如果我們寫的頁面開始多了，維護起來就很麻煩了，如果由 20 個頁面，其中某個功能需要調整，需要改 20 遍，組件化并不能改變代碼維護的問題。

所以 ukelli-ui 打造了 聚合表單 的組件，只需要描述業務行為，完全與 UI 分離：

完整定義請參考

import FormLayout, { FormLayoutProps } from "ukelli-ui/core/form-generator/form-layout"

const formOptions: FormLayoutProps["formOptions"] = [
  "日期",
  {
    refs: ["startDate", "endDate"],
    type: "datetimeRange",
    enableTime: true,
    title: "日期1",
    tips: "123",
    defaultValue: []
  },
  {
    refs: ["startDate2", "endDate2"],
    type: "datetimeRange",
    title: "日期2",
    tips: "123",
    defaultValue: []
  },
  "選擇器",
  ...
];

ReactDOM.render(
   {
      // handleChange
    }} />,
  document.querySelector("#root")
)

干凈利落，沒有 UI 信息，專注于業務描述，UI 就交給 FormLayout 聚合表單統一處理，最后組件會返回一個統一數據結構的 values，方便快捷。

這里可以體驗聚合表單

https://ui.ukelli.com/FormGen...

https://admin.ukelli.com/

Account: admin

Password: 123

當然還可以用 HOC 做更進一步的封裝，關于 HOC 部分會在其他篇幅講解。

參考

Form聚合表單源碼

Form聚合表單 demo

uke 管理后臺

GPU云服務器云服務器更好地那個cdn更好大數據更好地云服務器更好

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106482.html

精讀《怎么用 React Hooks 造輪子》

摘要：可以看到，這樣不僅沒有占用組件自己的，也不需要手寫回調函數進行處理，這些處理都壓縮成了一行。效果通過拿到周期才執行的回調函數。實現等價于的回調僅執行一次時，因此直接把回調函數拋出來即可。 1 引言上周的精讀《React Hooks》已經實現了對 React Hooks 的基本認知，也許你也看了 React Hooks 基本實現剖析（就是數組），但理解實現原理就可以用好了嗎？學的是...

Shihira 2019-08-26 13:22 評論0 收藏0
架構師之路

摘要：因為用戶不用在第一次進入應用時下載所有代碼，用戶能更快的看到頁面并與之交互。譯高階函數利用和來編寫更易維護的代碼高階函數可以幫助你增強你的，讓你的代碼更具有聲明性。知道什么時候和怎樣使用高階函數是至關重要的。 Vue 折騰記 - (10) 給axios做個挺靠譜的封裝(報錯,鑒權,跳轉,攔截,提示) 稍微改改都能直接拿來用~~~喲吼吼,喲吼吼..... 如何無痛降低 if else 面...

NikoManiac 2019-08-22 11:22 評論0 收藏0
vue和react的差異

摘要：而中實現原理是利用高階函數通過將多個函數組合成一個可執行執行函數關鍵步驟代碼如下所示。和都是基于更新差異元素。引言平時開發單頁項目應用基于vue,目前另外兩個比較熱的庫還有angular和react,angular 1系列用過,進入公司后由于基于vue技術棧就沒在關注了。一直在關注react,目的不是學習用法,只是為了拓展自己的視野和思維,通過了解一些使用上的差異性,來進一步的思考...

OnlyLing 2019-08-21 17:47 評論0 收藏0