表单是 Web 应用程序中必不可少的元素之一，它们往往是用户输入信息的最主要方式。然而，在处理表单数据时，开发者会面临一些常见的挑战，例如验证用户输入、处理异步请求和重新渲染表单等。为了解决这些问题，React 社区中出现了一个名为 Formik 的库，它可以简化表单处理的过程，提高开发效率，本文将详细介绍如何在 React 中使用 Formik，优化表单处理流程。
Formik 简介
Formik 是一个用于处理 React 表单的库，它管理表单状态和验证，为开发者提供了一个方便的方式来处理前端表单逻辑。Formik 的 API 非常简单，同时也非常强大，它支持许多常见的表单场景，例如异步提交、嵌套对象、数组字段，以及 Yup & Joy 的模式验证。此外，Formik 还提供了错误消息处理、触摸处理和字段状态等一系列功能。
安装 Formik
安装 Formik 只需要在命令行中输入以下命令：
--- ------- ------ ------
或者使用 yarn：
---- --- ------
上述命令将在项目中安装最新版本的 Formik。
创建一个简单的表单
我们先来创建一个简单的登录表单作为示例，了解如何在 React 中使用 Formik。
------ ----- ---- --------
------ - ------ - ---- ---------
----- --------- - -- -- -
------ -
-----
--------- ---------
-------
---------------- ------ --- --------- -- --
------------------ - ------------- -- -- -
------------------ ---- ----------- --------
---------------------
--
-
---
-------
-------------
-------------
-------------
-- -- -
----- ------------------------
---------------------
------
-----------
------------
-----------------------
--------------------
--
--- --
------------------------
------
---------------
---------------
-----------------------
-----------------------
--
--- --
------- ------------- ------------------------
------------- - ------------ - ---------
---------
-------
--
---------
------
--
-
------ ------- ----------在上述代码中，我们首先导入 React 和 Formik 组件，并创建一个名为 LoginForm 的函数式组件。在组件中，我们使用 Formik 组件包裹了表单，其中 initialValues 定义了表单的初始值，onSubmit 定义了表单提交时的行为。在组件中，我们使用了解构赋值的方式获取了 Formik 提供的四个变量（values、handleChange、handleSubmit 和 isSubmitting），并将它们传递给表单元素的 props 中。
Formik 的核心概念
在继续深入学习 Formik 之前，我们需要了解一些 Formik 的核心概念，以便更好地理解在表单处理中它所提供的便利。
Formik 组件
Formik 组件是所有 Formik API 的主要入口点，它作为组件的最外层包裹，将管理表单的状态和行为。在 Formik 组件内，我们可以使用 Form 子组件来包装所有表单元素，同时将 initialValues、onSubmit 和其他属性传递给 Form 子组件。
Field 组件
Field 组件用于在 Formik 表单中实例化任何表单元素，例如输入框、选择框、单选框等。与 Formik 组件一样，Field 组件也是一个组件的包装器，我们可以使用它来将标准的 HTML 元素转换成 Formik 类型。
initialValues
initialValues 是表单的初始状态，我们可以通过传递一个对象来定义表单中的每个字段的值。
values
values 到 initialValues 的关系类似于 state 到 props，即 values 是 Formik 组件内部的状态对象，当表单元素的值改变时，Formik 会自动更新 values 的值。
handleChange
handleChange 是一个回调函数，它会在表单元素的值改变时被调用，用于更新 values。当一个字段的值发生变化时，handleChange 会根据事件对象的 name 属性自动更新对应的 values 的值。
handleSubmit
handleSubmit 是一个回调函数，当用户提交表单时被触发，它可以执行后台请求、数据验证等操作，在提交后通常会把表单重置为初始状态。
isSubmitting
isSubmitting 用于判断表单是否正在提交。当表单被成功提交时，这个变量将变为 false，这样我们就可以轻松防止多次提交。
errors 和 touched
errors 和 touched 用于处理表单验证的错误消息和触摸状态。errors 对象将记录表单的验证消息，而 touched 对象则将记录表单元素是否被触摸过。这两个变量的定义需要在表单验证时设定，我们将在下面的代码示例中介绍此过程。
表单验证和错误消息
在表单处理中，验证是一个关键步骤。Formik 使用一种名为 Yup 的 JavaScript 模式验证库，它可以让我们轻松定义表单字段的验证规则。在下面的代码示例中，我们将使用 Yup 模式验证库，并将表单验证添加到我们的示例中。
------ ----- ---- --------
------ - ------- ------ ----- ------------ - ---- ---------
------ - -- --- ---- ------
----- ------------ - --------------------
------ ------------
--------------- -------
----------------------
--------- ------------
------- ---- --------
-------- ---- -------
----------------------
---
----- --------- - -- -- -
------ -
-----
--------- ---------
-------
---------------- ------ --- --------- -- --
-------------------------------
------------------ - ------------- -- -- -
------------------ ---- ----------- --------
---------------------
--
-
--- ------- ------------ -- -- -
------
-----
------ ------------------------------
------ ------------ ------------ --
------------- ------------ --
------
-----
------ ------------------------------------
------ --------------- --------------- --
------------- --------------- --
------
------- ------------- ------------------------
------------- - ------------ - ---------
---------
-------
--
---------
------
--
--
------ ------- ----------在上述代码中，我们首先导入了 Formik 的所有相关组件，并创建了一个名为 SignupSchema 的 Yup 模式验证对象。然后，我们在 Formik 中使用 validationSchema 属性将验证规则传递给表单。最后，我们在 Form 标签中使用 <div> 元素包装每个输入框元素，使用 Field 元素渲染输入框并将其名称作为组件的 prop 传递，同时使用 ErrorMessage 元素来显示错误消息。
处理异步请求
对于带有异步请求的表单处理，我们可以使用 Formik 的 handleSubmit 回调函数，不过这种方式通常需要向后台发出请求并等待响应才能更新状态。为了解决这个问题，Formik 提供了一种名为 setSubmitting 的函数，它允许我们在异步请求完成后手动更新表单状态。
在下面的代码示例中，我们将使用一个简单的 Ajax 调用来模拟异步处理过程。
------ ----- ---- --------
------ - ------- ------ ----- ------------ - ---- ---------
------ - -- --- ---- ------
----- ------------ - --------------------
------ ------------
--------------- -------
----------------------
--------- ------------
------- ---- --------
-------- ---- -------
----------------------
---
----- --------- - -- -- -
------ -
-----
--------- ---------
-------
---------------- ------ --- --------- -- --
-------------------------------
------------------ - ------------- -- -- -
------------- -- -
------------------ ---- ----------- --------
---------------------
-- ------
--
-
--- ------- ------------ -- -- -
------
-----
------ ------------------------------
------ ------------ ------------ --
------------- ------------ --
------
-----
------ ------------------------------------
------ --------------- --------------- --
------------- --------------- --
------
------- ------------- ------------------------
------------- - ------------ - ---------
---------
-------
--
---------
------
--
--
------ ------- ----------在上述代码中，我们首先定义了一个名为 SignupSchema 的 Yup 模式验证对象。在 Formik 组件中，我们将这个验证对象传递给 validationSchema 属性，然后在提交表单时添加一个异步处理函数，在这里我们使用了一个简单的延时函数模拟了一个异步处理过程。在异步处理函数结束后，我们使用 setSubmitting(false) 来手动更新表单状态。
结论
在这篇 React 中使用 Formik 优化表单处理流程的文章中，我们详细介绍了如何在 React 中使用 Formik。我们首先介绍了 Formik 的主要概念，例如 Formik 组件、Field 组件、initialValues、handleChange、handleSubmit、isSubmitting、errors 和 touched。然后，我们展示了如何使用 Yup 来进行表单验证和错误消息的处理，并展示了如何使用异步请求来处理表单处理。Formik 是一个非常强大且灵活的库，它可以让我们轻松地管理，并且针对表单中的常见问题提供了许多解决方案。相信在您的实际开发中，使用 Formik 并结合 Yup 对表单进行处理，会更加有效地提高您的开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66f50280c5c563ced569d247