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

jiezi

5 年前

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

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

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

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

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

例如我们实现以下表单：

一般的做法是，由开发引用 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/FormGen…
https://admin.ukelli.com/
- Account: admin
- Password: 123

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

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

前言

业务与 UI 彻底分离

参考