web 表单功能的设计问题,希望前辈指点思路

2019 年 7 月 17 日
 amet

web 表单里 input、select 这些,似乎应该是叫表单域?

TL;DR

我想让 React 或者其他工具帮我处理表单的基本交互(把表单域组件化?),同时我也能监听表单的填写情况,根据业务逻辑变更其中的表单域的结构和数据。

完整版:

小弟现在在做电子政务相关的功能,其中表单部分的需求大体有 3 个:

  1. 涉及到大量的表单(目前有 600+,后续会增加到数千份),每份表单代表一种业务,使用这些表单的终端至少有智能手机和家用 PC
  2. 含有一些稍稍复杂的交互需求,例如
    • 用户填写的 field 1 的值作为参数,查询到的数据作为 field 2, field 3 的默认值(但仍然是可修改的)
    • 用户在 radio 类型的表单域中选择不同的选项会出现不同的表单域(可能为复数)要求填写
    • 动态表单功能(并且能够嵌套上述功能)
  3. 表单存在和业务逻辑绑定的交互行为,不可复用,例如
    • 用户填写 field 1 后利用这个值经过一系列处理导致 field 2 从必填变为非必填或者在 select 类型的 field 3 中选中一个选项

由于不可能为这成百上千的表单编写页面(有人力不足和不同类型终端设备复用之类的考虑),为了前 2 个需求我设计了一套 DSL 用来描述表单域,每份表单只编写和维护配置信息,目前是交给客户端浏览器组装的,第 3 个需求则通过在表单组装完毕后再尝试执行单独编写的函数添加业务逻辑,修改 DOM,添加事件监听 等。

出于维护以及后期新增需求的考虑,我觉得至少需要把 UI 上变化、表单的行为、内部的数据等分隔开,然后了解了一些 React,也去了解了一些 redux 还有 redux-form 的信息。就我目前所知 1, 2 需求是可以照葫芦画瓢做出来的,但是对于第三点,我目前的实现方法似乎和 react 由状态控制一切的理念是冲突的。

第三点需求因为是业务相关的,所以我觉得不应该把它和表单域的配置和生成放在一起,但又不知道应当如何处理,对 redux 还处于一知半解的状态,还请各位指点一二。

因为重构成本目前是可以接受的,如果这样的思路有不妥的地方也请前辈指导。

788 次点击
所在节点    问与答
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/583702

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX