V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
golangLover
V2EX  ›  React

react 复杂表单的最佳实践和解决方案是什么

  •  
  •   golangLover · 2021-02-24 21:55:33 +08:00 · 3018 次点击
    这是一个创建于 1128 天前的主题,其中的信息可能已经有所发展或是发生改变。
    谢谢大家,如题。
    情景:公司有个表单比较复杂,属于多步注册,要填写的输入框,下拉框之类有几十个。一个个编写实在太累。还有就是很多的长度验证等各项要求。如果有开源案例就更好了,谢谢大家。
    15 条回复    2021-02-27 22:19:26 +08:00
    echowuhao
        1
    echowuhao  
       2021-02-24 22:00:26 +08:00
    echowuhao
        2
    echowuhao  
       2021-02-24 22:02:41 +08:00
    https://github.com/surveyjs/survey-library

    这个更复杂一点,我可以提供这个的咨询服务,哈哈。



    另外,顺便软广,有做问卷需求的可以找我。

    https://www.bestqa.net/
    javahuang
        3
    javahuang  
       2021-02-24 23:29:30 +08:00
    @echowuhao 老哥这个是团队做的还是个人做的,我之前业余时间也做了一个问卷编辑的,编辑体验大概和问卷网的差相似,回头挂上去给你看看,你这个体验有点差...
    另外,回答题主,你可以尝试使用 [formily]( https://github.com/alibaba/formily),应该可以解决你的问题。
    echowuhao
        4
    echowuhao  
       2021-02-24 23:42:31 +08:00
    @javahuang 多谢反馈。确实是的,可视化编辑属于迫于一些人的要求做的,还在完善中。问卷主要是要靠文字编辑的。

    比如:

    https://www.bestqa.net/sr/bestqa_stock_hdjy

    对应的问卷源代码如下,随便你找别的平台,可以试试,都不会有我做的快。不过你说的是对的,没有我给出的例子,对于没有接触过的,是无法明白如何写问卷的。

    ```
    page: 1
    require: True


    gene. 基因的英文是什么
    type: radio
    1. DNA
    2. RNA
    3. GENE
    4. SNP


    coivd.关于新冠病毒下列说法正确的是?
    type: radio
    1. 单链 DNA 病毒
    2. 双链 DNA 病毒
    3. 单链 RNA 病毒
    4. 双链 RNA 病毒


    province. 您长居地是哪个省份?
    type: dropdown
    choices_url: /go/get_row?survey_name=bestqa_stock_hdjy&excel_name=question_option_1.xlsx&key=question&value=省份
    choices_key: choice

    district. 您长居地是选择地级市
    type: dropdown
    isRequired: true
    choices_url: /go/get_row?survey_name=bestqa_stock_hdjy&excel_name=china_area_district_2020.xlsx&key=province&value={province}
    choices_key: city

    edu. 您的最高学历?
    type: radio
    1. 高中以下
    2. 高中
    3. 大专或者本科
    4. 硕士
    5. 博士

    percent. 华大基因占您的仓位比例?
    type: radio
    1. 尚在观察中
    2. <= 10%
    3. <= 20%
    4. <= 30%
    5. <= 40%
    5. <= 50%
    6. <= 60%
    7. <= 70%
    8. <= 80%
    9. <= 90%
    10. <= 100%

    cost. 您的持有成本是多少?
    type: radio
    1. <= 50
    2. <= 100
    3. <= 150
    4. 大于 150

    know. 你如何知道华大基因的?
    type: radio
    other: True
    1. 学校课堂
    2. 火眼实验室相关报道
    3. CEO 尹烨科普
    4. 汪建的采访
    5. 朋友推荐

    profit. 你是否知道 2019 华大基因的利润多少?
    type: radio
    1. 是
    2. 否

    6. 如果不知道,那么你觉得华大基因 2019 的利润在哪个区间?
    type:radio
    visibleIf: {profit} == 2
    1. 1 亿以下
    2. 1-2 亿(包括 2 亿)
    3. 2-5 亿(包括 5 亿)
    4. 5-10 亿(包括 10 亿)
    5. 10-15 亿(包括 15 亿)
    6. 大于 15 亿

    7. 您觉得一年后华大基因市值应该是多少(最接近的数字)?
    type:radio
    1. 100 亿
    2. 500 亿
    3. 1000 亿
    4. 5000 亿


    feedback. 对于问卷本身,您有哪些建议或者反馈(如,应该问哪些问题,哪些问题可以问的更好)
    type: textarea
    require: False
    ```
    echowuhao
        5
    echowuhao  
       2021-02-24 23:45:19 +08:00
    @javahuang 多谢反馈。确实是的,可视化编辑属于迫于一些人的要求做的,还在完善中。问卷主要是要靠文字编辑的。

    比如:



    对应的问卷源代码如下,随便你找别的平台,可以试试,都不会有我做的快。不过你说的是对的,没有我给出的例子,对于没有接触过的,是无法明白如何写问卷的。

    ```
    page: 1
    require: True


    gene. 基因的英文是什么
    type: radio
    1. DNA
    2. RNA
    3. GENE
    4. SNP


    coivd.关于新冠病毒下列说法正确的是?
    type: radio
    1. 单链 DNA 病毒
    2. 双链 DNA 病毒
    3. 单链 RNA 病毒
    4. 双链 RNA 病毒


    province. 您长居地是哪个省份?
    type: dropdown
    choices_url: /go/get_row?survey_name=bestqa_stock_hdjy&excel_name=question_option_1.xlsx&key=question&value=省份
    choices_key: choice

    district. 您长居地是选择地级市
    type: dropdown
    isRequired: true
    choices_url: /go/get_row?survey_name=bestqa_stock_hdjy&excel_name=china_area_district_2020.xlsx&key=province&value={province}
    choices_key: city

    edu. 您的最高学历?
    type: radio
    1. 高中以下
    2. 高中
    3. 大专或者本科
    4. 硕士
    5. 博士

    percent. 华大基因占您的仓位比例?
    type: radio
    1. 尚在观察中
    2. <= 10%
    3. <= 20%
    4. <= 30%
    5. <= 40%
    5. <= 50%
    6. <= 60%
    7. <= 70%
    8. <= 80%
    9. <= 90%
    10. <= 100%

    cost. 您的持有成本是多少?
    type: radio
    1. <= 50
    2. <= 100
    3. <= 150
    4. 大于 150

    know. 你如何知道华大基因的?
    type: radio
    other: True
    1. 学校课堂
    2. 火眼实验室相关报道
    3. CEO 尹烨科普
    4. 汪建的采访
    5. 朋友推荐

    profit. 你是否知道 2019 华大基因的利润多少?
    type: radio
    1. 是
    2. 否

    6. 如果不知道,那么你觉得华大基因 2019 的利润在哪个区间?
    type:radio
    visibleIf: {profit} == 2
    1. 1 亿以下
    2. 1-2 亿(包括 2 亿)
    3. 2-5 亿(包括 5 亿)
    4. 5-10 亿(包括 10 亿)
    5. 10-15 亿(包括 15 亿)
    6. 大于 15 亿

    7. 您觉得一年后华大基因市值应该是多少(最接近的数字)?
    type:radio
    1. 100 亿
    2. 500 亿
    3. 1000 亿
    4. 5000 亿


    feedback. 对于问卷本身,您有哪些建议或者反馈(如,应该问哪些问题,哪些问题可以问的更好)
    type: textarea
    require: False
    ```
    echowuhao
        6
    echowuhao  
       2021-02-24 23:47:59 +08:00
    多回复了,不知道咋删除。

    然后,又有人说了,我做的问卷很简单,拖拖拽拽就好了,也没啥复杂的地方。那样的话,随便找个问卷平台就可以做了,我也没必要再做一个类似的。
    echowuhao
        7
    echowuhao  
       2021-02-24 23:59:47 +08:00
    回到题题主的问题,几十个 问题,可以随便加入逻辑,验证(长度,正则,js 代码都可以),如果是我做, 看着要求,写出来问卷的源码 (类似上面的代码),编译一下就差不多了。
    TabGre
        8
    TabGre  
       2021-02-25 07:33:23 +08:00 via iPhone
    看库猜想是不是华大的,我之前在某与华大有很大渊源的公司也做过问券,发现题型是差不多的,比如矩阵题 😄
    echowuhao
        9
    echowuhao  
       2021-02-25 08:40:07 +08:00 via Android
    肯定不是的 我弄华大是因为买了华大的股票 哈哈
    javahuang
        10
    javahuang  
       2021-02-25 08:51:29 +08:00
    @echowuhao 明白您的意思,其实无外乎是自定义一套 dsl,然后来解析。我做的问卷可视化最终保存的也是一套通用的 json schema,很容易转成您的这种格式。还是看你的客户群体了,你让不懂问卷的人来学习这套规则,肯定不如直接让他拖拽来得快
    echowuhao
        11
    echowuhao  
       2021-02-25 08:56:51 +08:00
    @javahuang 是的,简单需求拖拽就够了。拖拽能实现的复杂度跟 DSL 没法比,主要还是看需求。虽然都是做问卷的,不同服务提供商面向的客户可能完全不一样。
    duan602728596
        12
    duan602728596  
       2021-02-25 09:11:11 +08:00
    https://duan602728596.github.io/antd-schema-form/#/
    antd-schema-form,基于 Ant Design,可以通过 JSON Schema 配置快速生成可交互的表单。可以支持相当复杂的嵌套数据
    palmers
        13
    palmers  
       2021-02-25 09:31:48 +08:00
    我推荐使用 ant-design, 高级表单: https://procomponents.ant.design/components/form 分布表单: https://procomponents.ant.design/components/steps-form
    mxT52CRuqR6o5
        14
    mxT52CRuqR6o5  
       2021-02-25 17:49:45 +08:00
    rc-form
    ant design 的表单就是依赖 rc-form,然后暴露的东西又阉割,用的贼别扭
    golangLover
        15
    golangLover  
    OP
       2021-02-27 22:19:26 +08:00 via Android
    @echowuhao 谢谢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1088 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 18:54 · PVG 02:54 · LAX 11:54 · JFK 14:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.