使用 React 和 Material UI 构建多步骤表单的课程
介绍
多步骤表格分解
心中要有计划。
使用 Material UI 时容易遇到的陷阱
结论
参考
介绍
在使用 React 构建多步骤表单时，我遇到了很多问题。我在为一个项目实现调查表单时，很难找到相关的资料。
幸运的是，我偶然发现了 Traversy Media 的 Brad 撰写的一篇关于使用 React 和 Material UI 构建多步骤表单的精彩教程，并结合了CSS Tricks的相关知识。尽管在我撰写本文时，这篇教程可能有些过时，但它仍然对我的项目实施很有帮助。
我建议你看看他的教程。如果你无法完成，可以使用一些现成的基本表单工具，例如Typeform或Google Forms。
多步骤表格分解
Brad 的教程和CSS Tricks提供了足够的入门信息和概念。我将为你提供一份详细的讲解，以便你更容易上手。如果你没有时间观看视频或阅读文章，可以参考这份教程。
在实施过程中，有一些需要注意的地方。多步骤表单包含5 个主要部分，需要逐一创建才能正常工作。如果您使用的是 Facebook 的Create React App 模板，并按照 Brad 的教程操作：
-
全局状态变量——它以名为values和step 的变量名创建。其目的是在用户填写表单时，存储、处理数据，并将数据传递到下一个表单，并在所有表单之间共享数据。
-
主表单模板 - 它用作表单多个页面的模板，以确保用户界面的一致性。
-
表单管理器 - 您可以在此处提供路由。它包括使用全局状态变量和方法，例如prevStep和nextStep 。它们通过跟踪页面编号（作为步骤全局状态变量）来实现页面之间的跳转。
-
独立页面 - 在Brad 的教程中，他创建了独立的 React 组件来表示每个需要填写的表单。
-
使用 API 进行表单提交和数据持久存储 - 您需要注意对已填写的表单页面进行数据持久存储。表单放弃率是所有表单开发者都会面临的现实问题。当需要填写的问题数量庞大时，放弃率会更高。因此，捕获和存储这些数据对于市场营销和用户体验优化都非常有用。
心中要有计划。
一开始只是凭着一个粗略的计划去实施，这让我感觉有点不知所措，也浪费了我很多时间。我建议你事先准备一份清单，并制定好用户界面设计、用户流程和业务逻辑的计划。
当我痛苦地意识到我的实施方案存在缺陷时，我一边摸索一边完善它，并迅速解决了这些问题。当它正式上线，人们一边喝着咖啡一边填写表格，内心充满怀疑时，我才意识到问题的严重性。
使用 Material UI 时容易遇到的陷阱
在将组件应用到每个表单页面之前，务必仔细阅读文档，并在主表单中测试各个组件。
很多时候，我真希望当初在主表单里就添加了错误信息之类的属性。以前我总是把之前复制的属性粘贴到各个表单页面里，修改起来非常费时费力。尤其是当你需要实现30多个单独的表单时，更是如此。
我知道我应该遵循“不要重复自己”的原则，但我更倾向于快速行动、打破常规的理念，尤其是在时间紧迫、需要尽快完成项目的时候。
由于 React 组件使用了 Material UI，因此需要自行处理验证。它提供了错误属性并显示错误信息，用户可以通过调用验证方法来检查每个输入组件的值变量，并在用户点击“继续”按钮时进行验证。
结论
我希望这篇文章对计划在 React 中实现多步骤表单的你有所帮助。此外，我发现使用React Hook Form比使用 Material UI 组件更好。
因为它内置了表单验证功能，而且任何人都能轻松上手。这让我感觉自己像是在构建一个 HTML 表单，而不是一个 React 表单。
如果你喜欢这篇文章，请订阅我的冒险家通讯，其中包含我每周在Python、Web 开发、创业领域偶然发现的有趣内容。
您也可以关注我，获取我在Dev上发表的文章的最新更新 。原文标题为《使用 React 和 Material UI 构建多步骤表单的课程》，阅读时间：4 分钟，封面图片来自Unsplash 的 Bruno Nascimento。
参考
- 使用 React 和 Material UI 的多步骤表单
- Material UI
- React多步骤表单的魔力
- 创建 React 应用模板
- Typeform
- 谷歌表单
- React Hook 表单
- 拉开