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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› React

这是一个创建于 1350 天前的主题，其中的信息可能已经有所发展或是发生改变。

谢谢大家，如题。
情景：公司有个表单比较复杂，属于多步注册，要填写的输入框，下拉框之类有几十个。一个个编写实在太累。还有就是很多的长度验证等各项要求。如果有开源案例就更好了，谢谢大家。

表单

React

谢谢

复杂

15 条回复 • 2021-02-27 22:19:26 +08:00

echowuhao

2021-02-24 22:00:26 +08:00

https://react-jsonschema-form.readthedocs.io/en/latest/

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 via iPhone

看库猜想是不是华大的，我之前在某与华大有很大渊源的公司也做过问券，发现题型是差不多的，比如矩阵题 😄

echowuhao

2021-02-25 08:40:07 +08:00 via Android

肯定不是的我弄华大是因为买了华大的股票哈哈

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 via Android

@echowuhao 谢谢