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

2021-02-24 21:55:33 +08:00
 golangLover
谢谢大家,如题。
情景:公司有个表单比较复杂,属于多步注册,要填写的输入框,下拉框之类有几十个。一个个编写实在太累。还有就是很多的长度验证等各项要求。如果有开源案例就更好了,谢谢大家。
3247 次点击
所在节点    React
15 条回复
echowuhao
2021-02-24 22:00:26 +08:00
echowuhao
2021-02-24 22:02:41 +08:00
https://github.com/surveyjs/survey-library

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



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

https://www.bestqa.net/
javahuang
2021-02-24 23:29:30 +08:00
@echowuhao 老哥这个是团队做的还是个人做的,我之前业余时间也做了一个问卷编辑的,编辑体验大概和问卷网的差相似,回头挂上去给你看看,你这个体验有点差...
另外,回答题主,你可以尝试使用 [formily]( https://github.com/alibaba/formily),应该可以解决你的问题。
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
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
2021-02-24 23:47:59 +08:00
多回复了,不知道咋删除。

然后,又有人说了,我做的问卷很简单,拖拖拽拽就好了,也没啥复杂的地方。那样的话,随便找个问卷平台就可以做了,我也没必要再做一个类似的。
echowuhao
2021-02-24 23:59:47 +08:00
回到题题主的问题,几十个 问题,可以随便加入逻辑,验证(长度,正则,js 代码都可以),如果是我做, 看着要求,写出来问卷的源码 (类似上面的代码),编译一下就差不多了。
TabGre
2021-02-25 07:33:23 +08:00
看库猜想是不是华大的,我之前在某与华大有很大渊源的公司也做过问券,发现题型是差不多的,比如矩阵题 😄
echowuhao
2021-02-25 08:40:07 +08:00
肯定不是的 我弄华大是因为买了华大的股票 哈哈
javahuang
2021-02-25 08:51:29 +08:00
@echowuhao 明白您的意思,其实无外乎是自定义一套 dsl,然后来解析。我做的问卷可视化最终保存的也是一套通用的 json schema,很容易转成您的这种格式。还是看你的客户群体了,你让不懂问卷的人来学习这套规则,肯定不如直接让他拖拽来得快
echowuhao
2021-02-25 08:56:51 +08:00
@javahuang 是的,简单需求拖拽就够了。拖拽能实现的复杂度跟 DSL 没法比,主要还是看需求。虽然都是做问卷的,不同服务提供商面向的客户可能完全不一样。
duan602728596
2021-02-25 09:11:11 +08:00
https://duan602728596.github.io/antd-schema-form/#/
antd-schema-form,基于 Ant Design,可以通过 JSON Schema 配置快速生成可交互的表单。可以支持相当复杂的嵌套数据
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
2021-02-25 17:49:45 +08:00
rc-form
ant design 的表单就是依赖 rc-form,然后暴露的东西又阉割,用的贼别扭
golangLover
2021-02-27 22:19:26 +08:00
@echowuhao 谢谢

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

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

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

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

© 2021 V2EX