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

6 min read
# 记录

前言

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

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

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

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

业务与 UI 彻底分离

术业有专攻,专注才能把事情做完美,减少出错的概率。所以我认为将业务与 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,方便快捷。

这里可以体验聚合表单

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

参考

Table of Contents