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

前言

管理后台应用有两个最主要的功能：

• 数据录入 ---- 表单 (Form)
• 数据展示 ---- 表格 (Table)

业务系统必不可少的功能模块，并且占据开发量的 80% 以上。

如何可以快速的，高质量完成对应的业务需求呢？

业务与 UI 彻底分离

术业有专攻，专注才能把事情做完美，减少出错的概率。所以我认为将业务与 UI 彻底分离，会是更好的选择。

例如我们实现以下表单：

form-demo.png

一般的做法是，由开发引用 UI 库对应组件然后渲染：

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

const Page = () => {
  return (
    <Form>
      <Input {...props} onChange={handleChange} />
      <Selector {...props} onChange={handleChange} />
      // ...
    </Form>
  )
}

这样问题不大，但是如果我们写的页面开始多了，维护起来就很麻烦了，如果由 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(
  <FormLayout formOptions={formOptions}
    onChange={(values, changeRef, changeVal) => {
      // handleChange
    }} />,
  document.querySelector('#root')
)

干净利落，没有 UI 信息，专注于业务描述，UI 就交给 FormLayout 聚合表单统一处理，最后组件会返回一个统一数据结构的 values，方便快捷。

这里可以体验聚合表单

• https://ui.ukelli.com/FormGenerator
• https://admin.ukelli.com/
  • Account: admin
  • Password: 123

当然还可以用 HOC 做更进一步的封装，关于 HOC 部分会在其他篇幅讲解。

参考

• Form聚合表单源码
• Form聚合表单 demo
• uke 管理后台