在 React 中无压力地创建表单

管理验证、错误、修改字段列表等的简单方法

Photo by 泰勒尼克斯 on 不飞溅

老实说，有很多方法可以管理表单的状态。现在我们有很多选择。 甲酸 , 反应钩子形式 ， 和 反应最终形式 是最受欢迎的。

哦，你可以制作你的自定义钩子。这里最具挑战性的部分是为您的项目选择正确的选项。

我的故事

几年前，我正在研究在 React 中管理表单，寻找最适合我的解决方案。我想找到一种简单而美观的方法来管理验证和错误，保留访问字段列表等等。

那么它做了什么？我创建了我的自定义钩子！

是的，我喜欢编码，我喜欢创建我的解决方案。这是一个简单的钩子，使用[ 用户减速器](https://reactjs.org/docs/hooks-reference.html) 下面来管理表单的状态。表单中的每次击键都会更新更改（我们都知道 React 行为是正常的）。

我在那里没有任何花哨的验证，仅在提交时检查数据，并且一切正常，但是……

问题

表现！一开始我并没有感觉到。我以多种形式使用我的钩子，一切都很棒，但我的形式增长了；我有很大的嵌套对象，所以我不得不做一些魔术[ 使用备忘录](https://reactjs.org/docs/hooks-reference.html#usememo) ,[ 使用回调](https://reactjs.org/docs/hooks-reference.html#usecallback) ，以及正确的构图，这有帮助，但是……

我意识到我的解决方案太简单了。我需要更多。我想快速检测表单中是否进行了任何更改，更改了哪些字段等等。我可能可以改进我的钩子并使它更“聪明”，但这需要我更多的努力和时间。如果没有现有的解决方案，那很好，但事实并非如此。

不要误会我的意思。我不是在谈论基本表单，其中您有一个或两个输入字段和一个按钮。您可以轻松地生活，无需任何图书馆。

我明白我不想把时间浪费在解决这些问题上；我只是想找到一个可以做所有这些事情的库，并且不应该对表单的每一次更改都进行重新渲染。

我开始学习现有的解决方案。

寻找答案

那个时候，最受欢迎的是Formik。如果我们现在查看官方文档，我们可以看到它仍然是推荐的方式之一。

如果您正在寻找一个完整的解决方案，包括验证、跟踪访问的字段和处理表单提交，Formik 是受欢迎的选择之一。但是，它建立在受控组件和管理状态的相同原则之上——所以不要忽视学习它们。

但正如我之前提到的，我不想在每次更改时重新呈现我的表单。在阅读文档和实验之后，我选择了 React Hook Form。

为什么选择 React Hook 形式？

1. 使用 useRef 可以提高性能。您可以在 官方文档 .
2. 您可以使用 Yup 进行验证。
3. 带有大量示例的优秀文档。
4. 您可以注册不受控制的组件或使用来自 react-hook-form 的 Controller 控制，这允许您使用库中的组件，例如 材料界面 , 蚂蚁Td , 流畅的用户界面 ， 和别的。
5. 图书馆使用[ 使用上下文](https://reactjs.org/docs/hooks-reference.html#usecontext) 钩子，因此您可以将方法传递给深度嵌套的孩子。
6. 如果您对钩子感到满意，RHF 语法看起来会非常熟悉且易于理解。

当我开始使用这个库并看到它时，我感受到了不同 反应探查器 .查看组件重新渲染的频率以及原因会很有帮助。有时它可以帮助解决性能问题。

使用是的

我之前提到过我需要管理验证，所以我使用了 Yup。这是一种验证数据的绝妙方法，因为您可以独立使用它或与其他库一起使用它来管理状态。

yup 很容易用于定义验证；你有很多不同的类型，你可以描述依赖关系和你的验证规则。在我的示例中，我提交了“姓氏”，当字段的标题值为“测试”时，这是必需的。看看这个例子，你会发现使用 Yup 是多么简单：

使用 React Hook 表单

使用 FluentUI、MaterialUI 或其他库中的组件有助于选择使用受控组件。是的，我不想使用它们，但 React Hook Form 允许我使用受控组件，从而最大限度地减少渲染。不幸的是，我不能不受控制地使用一些 FluentUI 组件，所以 RHF 帮助优化性能真是太棒了。

好的，但是如何使用这个库呢？

首先，我们需要安装两个包： npm install react-hook-form 是的 .我们可以传递默认值并说明我们希望多久验证一次表单。

然后我们需要决定我们将使用什么类型的组件。我们在这里有两个选择：

1. 注册不受控制的组件
2. 使用名为的包装器 控制器 用于受控组件

对于第二个选项，您需要用 控制器 来自 RHF。这是我的例子 文本域 来自 FluentUI 库。

最好的是，如果需要，我们可以将两种选择结合起来，并以一种形式使用两种方式。这是我的受控组件示例：

这是最终结果 - 快速而轻松。

这就是使用 React Hook Form 和 Yup 在 React 中管理表单状态的全部内容。我希望这些库也能帮助你。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/2016/19063103