标签：验证 创建 表单 React 使用 组件 钩子

在 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

标签：验证,创建,表单,React,使用,组件,钩子
来源： https://www.cnblogs.com/amboke/p/16641571.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。