V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
MorningStar0
V2EX  ›  分享创造

一个非常灵活的 react 表单生成器,支持 ui 和数据结构异构,求围观

  •  1
     
  •   MorningStar0 · 189 天前 · 1354 次点击
    这是一个创建于 189 天前的主题,其中的信息可能已经有所发展或是发生改变。

    同事老哥搞了个 react 的表单生成器,主要是解决大量表单项编写和数据双向绑定时,各种数据异构的问题 https://github.com/007sair/formik-form-render.git

    Demo&文档地址: https://007sair.github.io/formik-form-render/demo

    13 条回复    2021-05-31 20:34:09 +08:00
    MorningStar0
        1
    MorningStar0  
    OP
       189 天前
    求大佬们提提意见
    shakukansp
        2
    shakukansp  
       189 天前
    表单验证……现在用 vuelidate-next, 然后自己写一个简单的验证样式注入器,往 slot 里面塞任意组件库的组件都行,只要往上面加带 v-deep 的 class 就能注入样式,还可以自定义错误的显示方式,tooltip 或者换行文字、inline 文字提示都可以

    比什么生成器都灵活
    MorningStar0
        3
    MorningStar0  
    OP
       188 天前
    @shakukansp 这个是 react 啊。。。。
    shakukansp
        4
    shakukansp  
       188 天前
    @MorningStar0 思路一样
    MorningStar0
        5
    MorningStar0  
    OP
       188 天前
    @shakukansp 这个生成器主要解决 ui 的嵌套结构和数据的层级异构的问题,而且 react 在表单状态缓存的思路基本没法借鉴 vue,因为 react 本身就不太建议做这种状态的存储
    jason94
        6
    jason94  
       186 天前
    表单联动那块好像有 bug,ui 是更新了,但是值没有生效。
    而且联动才显示的字段,在隐藏时候,这个字段是不是不应该存在的,给值也应该是 undefined 。
    MorningStar0
        7
    MorningStar0  
    OP
       186 天前
    @jason94 配置里的显示或隐藏目前是只对 ui 的展示做了更新,目前没有对最终输出做更新。
    而且 ui 的展示完全受输入数据 (template 的值) 的控制,这意味着,如果输入数据内没有这个值, 即使 UI 配置( forms 的值)中写了这个组件的渲染,这个组件也不会出现。
    MorningStar0
        8
    MorningStar0  
    OP
       186 天前
    @jason94 这样设计主要是想 把同一个 UI 的配置应用给不同的数据,就比如 Echarts 那种特别多配置的情况
    whatacold
        9
    whatacold  
       186 天前 via iPhone
    刚学不久,react 也能双向数据绑定吗?我看文档好像只能单向。
    MorningStar0
        10
    MorningStar0  
    OP
       186 天前
    @whatacold react 本身是没提供类似的 api,但是可以在上层封装下
    MorningStar0
        11
    MorningStar0  
    OP
       186 天前
    @whatacold 当然也可以在组件的 onchange 事件里,手动 setState,然后 value={thatState}也能做成双向的
    whatacold
        12
    whatacold  
       186 天前 via iPhone
    @MorningStar0 大概明白了,谢谢。
    skyfore
        13
    skyfore  
       186 天前
    推荐 [formilyjs]( https://formilyjs.org/#/bdCRC5/dzUZU8il),自己用过,拆分了逻辑层与 UI 层,可以自己注册业务组件。
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2118 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 15:50 · PVG 23:50 · LAX 07:50 · JFK 10:50
    ♥ Do have faith in what you're doing.