其他分享
首页 > 其他分享> > 在 React 中无压力地创建表单

在 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