在 React.js 中正确使用表单（无需库）

TL;DR

• 为了创建可组合、可重用和可读的组件，我们使用利用 TypeScript 和 Context API 的组件工厂。
• 结合上下文包装器、上下文操作和上下文表单输入将大大提高代码的可读性和可重用性。

介绍

如果您可以创建模块化且可重复使用的表单实用程序，那么您只需要从登录表单的组件中编写一个注册表单，并定义您希望电子邮件是唯一的！

如果您可以创建可读性极强的组件，并且愿意花几个小时来阅读，那会怎样？

如果任何阅读您的组件的人都能立即在想象中看到它在网络上的样子，那会怎样？

看看下面的例子：

我的名字是 Itay，我是一名前端开发人员，专门研究前端后端代码，尤其是 React.js。

在本文中，我将描述我在 React 中编写表单逻辑的方法。即使你决定将其中一部分应用到你的代码库中，我保证它也会更加简洁。

注意：这篇文章主要基于我在上一篇文章中写到的主题，并且使用了上下文逻辑包装器和动作。

在本文中，您将了解：

1. 钩子useField​
2. 形成阶段并形成输入工厂。

最后，我将向你展示一个详细的身份验证表单示例。

田野钩

让我们从一些 TypeScript 开始：

现在我们可以使用这些类型来创建自定义钩子了。从类型定义中，我们了解了这个钩子的功能：

• 该钩子将管理字段状态
• 该钩子负责显示错误并提供显示错误的方法。由此，我们了解到该钩子也将包含错误可见性状态。
• 该钩子没有提供隐藏错误的方法，这意味着它应该自己处理这个问题。

让我们看看我们可以用它构建什么：

如果您在应用中使用了这个钩子，那么一切就已经变得简单多了。不过，我想向您展示如何使用表单输入工厂和表单阶段将表单提升到一个新的水平。

表单输入工厂

温馨提示：

组件工厂是一个返回函数式组件的函数。它与 HOC 不同，它不接受任何组件作为参数。

让我们再次从一些 TypeScript 开始：

现在我们了解了参数，让我们编写工厂。我希望有一种方法可以在需要时覆盖标签和提示。

然后，您可以创建一个包含表单字段的自定义上下文，并让上下文连接所有内容的逻辑。

请注意，您可以向表单添加更多字段（例如名称），而不是在登录表单中呈现它们的输入，而是在注册表单中呈现它们 - 并且一切仍将按预期工作

让我们创建字段：

形成阶段

表格阶段是填写表格时发生的任何事情，您不知道它需要花费多少时间。

形成阶段包括以下两种类型：

1. 用户填写输入字段
2. 异步验证表单中的值。例如，登录时验证您的电子邮件和密码。

我强烈建议将阶段存储在 TypeScript 枚举中，就像下面的示例一样，然后创建逻辑包装器来在各个阶段之间切换。让我们看看它如何增强我们的代码库，使其具有极强的可读性。

您现在可以使用表单阶段有条件地呈现加载消息，或隐藏表单当前阶段不需要的输入，为填写表单的用户创建“流程”。

让我们看看 Auth Form Context 背后的完整逻辑：

在我的一个项目中，我创建了一个更复杂的身份验证表单，其中包含名称和密码确认字段，但可重用性功能为我节省了大量时间！

增强功能

• 如果您愿意，您还可以创建一个 passwordVisible 布尔值并从中组成一个条件扭曲器，为您的密码输入字段创建可见性选项。

类似于：

• 您还可以升级上下文操作工厂，提供一个disabledConsumer参数以在值未经过验证时禁用按钮。

查看我的项目中的一个很酷的用法：