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

Heier 发布于2019-08-26 10:37 / 2374人阅读

摘要：前言管理后台应用有两个最主要的功能数据录入表单数据展示表格业务系统必不可少的功能模块，并且占据开发量的以上。所以我认为将业务与彻底分离，会是更好的选择。参考聚合表单源码聚合表单管理后台

前言

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

数据录入 ---- 表单 (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更好大数据更好地云服务器更好

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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