一个非常灵活的 react 表单生成器，支持 ui 和数据结构异构，求围观
MorningStar0 · 2021-05-28 14:16:27 +08:00 · 2747 次点击这是一个创建于 1309 天前的主题，其中的信息可能已经有所发展或是发生改变。
同事老哥搞了个 react 的表单生成器，主要是解决大量表单项编写和数据双向绑定时，各种数据异构的问题 https://github.com/007sair/formik-form-render.git
Demo&文档地址： https://007sair.github.io/formik-form-render/demo
 |
1
MorningStar0 OP 求大佬们提提意见
|
 |
2
shakukansp 2021-05-28 18:20:33 +08:00
表单验证……现在用 vuelidate-next, 然后自己写一个简单的验证样式注入器，往 slot 里面塞任意组件库的组件都行，只要往上面加带 v-deep 的 class 就能注入样式，还可以自定义错误的显示方式,tooltip 或者换行文字、inline 文字提示都可以
比什么生成器都灵活 |
|
3
MorningStar0 OP @shakukansp 这个是 react 啊。。。。
|
|
4
shakukansp 2021-05-29 16:58:57 +08:00
@MorningStar0 思路一样
|
|
5
MorningStar0 OP @shakukansp 这个生成器主要解决 ui 的嵌套结构和数据的层级异构的问题，而且 react 在表单状态缓存的思路基本没法借鉴 vue，因为 react 本身就不太建议做这种状态的存储
|
 |
6
jason94 2021-05-31 09:43:28 +08:00
表单联动那块好像有 bug，ui 是更新了，但是值没有生效。
而且联动才显示的字段，在隐藏时候，这个字段是不是不应该存在的，给值也应该是 undefined 。 |
|
7
MorningStar0 OP @jason94 配置里的显示或隐藏目前是只对 ui 的展示做了更新，目前没有对最终输出做更新。
而且 ui 的展示完全受输入数据 (template 的值) 的控制，这意味着，如果输入数据内没有这个值， 即使 UI 配置（ forms 的值）中写了这个组件的渲染，这个组件也不会出现。 |
|
8
MorningStar0 OP @jason94 这样设计主要是想 把同一个 UI 的配置应用给不同的数据，就比如 Echarts 那种特别多配置的情况
|
 |
9
whatacold 2021-05-31 12:03:58 +08:00 via iPhone
刚学不久，react 也能双向数据绑定吗？我看文档好像只能单向。
|
|
10
MorningStar0 OP @whatacold react 本身是没提供类似的 api，但是可以在上层封装下
|
|
11
MorningStar0 OP @whatacold 当然也可以在组件的 onchange 事件里，手动 setState，然后 value={thatState}也能做成双向的
|
|
12
whatacold 2021-05-31 18:55:33 +08:00 via iPhone
@MorningStar0 大概明白了，谢谢。
|
 |
13
skyfore 2021-05-31 20:34:09 +08:00
推荐 [formilyjs]( https://formilyjs.org/#/bdCRC5/dzUZU8il)，自己用过，拆分了逻辑层与 UI 层，可以自己注册业务组件。
|
Select Language