Web 表单是 Web 开发的一个重要方面，因为它们用于与用户交互。 例如，他们可以通过注册/登录或发送消息来收集用户数据。
您可以在 React 中从头开始创建表单。 然而，这种方法会消耗您大量的时间。 幸运的是，您可以使用以库形式打包的现成表单。
React 表单库是预先设计的表单的集合，您可以将其导入到 React 应用程序中。 此类库可以帮助您节省时间，并且可以响应不同的屏幕尺寸。
这些是使用 React 表单库的一些原因；
- 简化的表单管理：表单用于收集用户数据。 在典型的表单提交过程中，状态会发生很大的变化。 例如，当用户登录时，状态从访问者更改为登录用户。 React 表单库提供了一种更简单的方法来管理这些表单，从处理提交和验证到状态管理。
- 与 UI 框架集成：大多数 React 表单库与流行的 UI 组件框架（如 Material UI 和 Bootstrap）集成。 因此，您可以使用此类框架中的表单，并在表单中享受一致的样式。
- 轻松验证：大多数 React 表单库都允许灵活验证表单。 验证可以在表单或输入级别进行。
- 错误处理和反馈：大多数库都提供突出显示错误消息的功能。 因此，当您的表单失败时，您可以收到警报并了解原因。
这些是您今天可以开始使用的最佳 React 表单库；
目录
反应钩子形式
反应钩子形式 是一个高性能且可扩展的表单库，具有易于使用的验证功能。 该开源库可通过 React Native 用于 Web 和移动应用程序。
特征
- 高性能：使用此库创建的表单小而快。 React Hook Form 消除了不必要的重新渲染。
- 支持验证：React Hook Form 允许您向表单添加验证，以确保用户提交有效数据。 例如，您可以设置密码的最小字符数或描述所需的电子邮件格式。
- 附带表单创建器：该库使您可以控制表单创建，而不是依赖和编辑现有组件。 模板已经设计好了； 您可以轻松添加和删除字段。
- 全面的 API：根据您的需求，您可以使用不同的 React Hook Forms API。 例如，您可以在受控表单中使用 useController API。 另一方面，您可以使用 useFormState 来启用单独的表单状态更新。
福米克
福米克 是一个可扩展且高性能的 React 表单库，可与 Web 和移动应用程序配合使用。 可以使用 NPM 或 Yarn 等包管理器来安装该库。 Formik 允许您通过其久经考验的解决方案以更少的代码构建高性能表单。
特征
- 可采用：Formik 不依赖 MobX 和 Redux 等外部库来处理状态。 因此，您只需要安装这个库并创建高性能表单。
- 声明式：您不必担心无聊、重复的任务，因为 Formik 会处理这些问题。 这种方法可以让您更轻松地更多地关注业务逻辑，因为库会处理处理提交和验证等事务。
- 直观：这个库依赖于简单的 React 状态和属性。 调试和测试表单变得轻而易举，因为这个库不关注外部“魔法”，而是关注 React 的核心原则。
- 支持验证：您可以在使用 Formik 时在不同级别验证您的 React 表单。 例如，您可以实现字段级、表单级、相关验证和自定义验证。
制服
制服 是一个功能强大的 React 库，您可以使用它从任何模式创建表单。 用户可以享受使用开箱即用的内置字段，通过减少 51% 的代码来简化表单创建。 该库以其美观的组件而闻名，同时支持关注点分离。
特征
- 与各种模式集成：您可以将 Uniforms 与 JSON 模式、SimpleSchema、GraphQL 和 Zod 结合使用。
- 提供多种主题：Uniforms 可与大多数 UI 样式框架配合使用，例如 AntD 主题、Bootstrap、MUI、Material UI、Semantic UI 和 Plain HTML。
- 可定制：该库的组件提供的字段是完全可定制的。 您可以根据主题相关方法或抽象级别架构来定义自定义字段。
- 支持验证：您可以在组件中实现异步或内联表单验证或两者兼而有之。
- 自动状态管理：Uniforms 不依赖 Redux 和 MobX 等外部状态管理库。
反应最终形式
反应最终形式 是一个基于订阅的高性能 React 表单状态管理工具。 默认情况下，该库“订阅”所有更改。 但是，您可以微调表单并指示 React Final Form 在状态管理期间应观察的字段。
特征
- 模块化：React Final Form 中的组件被分解为小的、可重用的部分。 这种方法允许开发人员只向他们的应用程序发送必要的部分。
- 高性能：表单的性能可能会随着应用程序的增长而降低。 该库允许您指定状态更改时通知哪些字段，从而提高应用程序的性能。
- 零依赖：React Final Form 是一个小包，不依赖 Redux 等其他库进行状态管理。
- 与钩子兼容：您可以使用钩子API灵活地组合表单的功能。
- 可定制：您可以微调 React Final Form 上的组件以满足您的需求。
- 支持验证：您可以在整个表单或输入级别验证输入。
剑道反应形式
剑道反应形式 是一个快速包，可以帮助开发人员管理表单中的状态。 该工具与通用组件和 KendoReact 组件兼容。 该软件包是 KendoReact 库中 100 多个专业设计的组件的一部分。
特征
- 支持自定义组件：您可以从头开始创建 React 表单，并让 KendoReact Form 负责状态管理。
- 灵活的验证：您可以通过在字段级别或整个表单上验证表单来确保表单捕获正确的信息。
- 可定制：KendoReact Form 有许多组件可以导入到您的应用程序中。 您可以根据您的品牌需求和风格添加新字段或删除或更改内容。
- 灵活的布局：您可以依靠内置组件来指导您构建表单。 该库允许您选择水平和垂直布局以满足您的需求。
- 组件集成：该工具具有允许用户编辑和自定义其表单的内置功能。 这种方法确保 KendoReact Suite 对表单具有一致的方法。
Formsy-反应
Formsy-反应 是 React 应用程序的表单构建器。 该库允许开发人员构建和验证不同形式的组件。 使用 Yarn 安装 Formsy-react 并立即开始使用
特征
- 支持自定义元素：Formsy-react 允许您创建任何表单元素并享受验证。
- 错误处理和验证：Formsy-react 具有显示错误消息并根据验证结果提供反馈的内置功能。
- 支持验证：您可以在表单或输入级别验证组件。
- 处理程序：您可以针对表单的不同状态使用“onSubmit”或“onValid”等处理程序。
房屋表格
房屋表格 是 React 的表单验证库。 该库由 Zod 提供支持，允许您解析各种数据类型所需的几乎所有操作。 HouseForm 允许您的 UI 代码和表单验证和谐相处。
特征
- Headless：HouseForm 没有任何 UI 组件。 因此，它允许您携带组件并使用其验证功能。
- 字段优先：此工具允许您在字段中合并 UI 和验证逻辑。
- 灵活的 API：HouseForm 不会强迫您使用一种验证方法。 因此，您可以根据需要混合和匹配验证方法。
- 运行时竞争：您可以在任何运行 React 应用程序的环境中使用 HouseForm。
- 轻量且快速：整个包只有 4KB GZIP。 HouseForm 也经过测试，发现比现有替代方案更快。
反应反应形式
反应反应形式 是一个库，允许您在组件类中构建表单对象树，然后将它们与本机表单控制元素绑定。 使用 NPM 安装此库并立即开始将其组件导入到您的 React 应用程序中。
- 零依赖：随着应用程序的增长，表单可能会变得相当大。 React-reactive-form 没有依赖关系，这意味着您不必太担心性能。
- 订阅者：此功能可以轻松跟踪表单中控件的状态和值更改。
- 验证：React-reactive-form 有各种可以在表单中使用的验证器。 如果您的任务更加具体，您还可以使用自定义同步和异步验证器。
- 选择 API：根据任务，有多个 API 可供选择。 例如，您可以使用“FormGenerator”API 创建大型表单。 您还可以使用“FormArray”和“FormGroup”API 更好地管理您的表单。
- 嵌套表单：React-reactive-form 允许您在另一个表单内创建表单。 当您处理复杂或分层数据时，这种方法是完美的。
结论
您现在可以使用各种 React 表单库。 库的选择将取决于您正在寻找的功能及其易用性。 您可以在应用程序的不同组件中使用多个库。
查看我们关于可在应用程序中使用的最佳 React 图表库的文章。
