教程

开始之前

欢迎来到 Formik 教程。本教程将教你构建 React 中简单和复杂表单所需的一切。

如果你很着急，只想在本地机器上开始编写代码，请查看60 秒快速入门。

我们正在构建什么？

在本教程中，我们将使用 React 和 Formik 构建一个复杂的新闻通讯注册表单。

您可以在此处查看我们将要构建的内容：最终结果。如果您不理解代码，请不要担心！本教程的目的是帮助您理解 Formik。

先决条件

您需要熟悉 HTML、CSS、现代 JavaScript 和 React（以及 React Hooks）才能完全理解 Formik 及其工作原理。在本教程中，我们使用的是箭头函数、let、const、扩展语法、解构、计算属性名和 async/await。您可以使用 Babel REPL 检查 ES6 代码编译成的结果。

教程设置

完成本教程有两种方法：您可以在浏览器中编写代码，或者在您的计算机上设置本地开发环境。

设置选项 1：在浏览器中编写代码

这是最快的入门方式！

首先，在新标签页中打开此启动代码。新标签页应显示一个电子邮件地址输入框、一个提交按钮和一些 React 代码。在本教程中，我们将编辑 React 代码。

跳过第二个设置选项，并转到概述部分以获取 Formik 的概述。

设置选项 2：本地开发环境

这完全是可选的，在本教程中不需要！

可选：使用您喜欢的文本编辑器在本地学习的说明

此设置需要更多工作，但允许您使用您选择的编辑器完成本教程。以下是需要遵循的步骤

确保您已安装最新版本的Node.js。
按照Create React App 的安装说明创建一个新项目。

 npx create-react-app my-app

安装 Formik

 npm i formik

或

 yarn add formik

删除新项目中 src/ 文件夹中的所有文件

注意
不要删除整个 src 文件夹，只需删除其中的原始源文件即可。我们将在下一步中用此项目的示例替换默认的源文件。

1 cd my-app
2 cd src
3 
4 # If you’re using a Mac or Linux:
5 rm -f *
6 
7 # Or, if you’re on Windows:
8 del *
9 
10 # Then, switch back to the project folder
11 cd ..

在 src/ 文件夹中添加一个名为 styles.css 的文件，其中包含此 CSS 代码。
在 src/ 文件夹中添加一个名为 index.js 的文件，其中包含此 JS 代码。

现在在项目文件夹中运行 npm start，并在浏览器中打开 http://localhost:3000。您应该会看到一个电子邮件输入框和一个提交按钮。

我们建议按照这些说明配置编辑器的语法高亮显示。

我卡住了，怎么办？

如果您遇到问题，请查看 Formik 的GitHub 讨论。此外，Formium 社区 Discord 服务器也是一个快速获得帮助的好方法。如果您没有收到回复，或者仍然卡住，请提交问题，我们将帮助您解决。

概述：什么是 Formik？

Formik 是一小组 React 组件和 Hook，用于在 React 和 React Native 中构建表单。它可以帮助解决三个最令人烦恼的部分

在表单状态中获取和设置值
验证和错误消息
处理表单提交

通过将以上所有内容集中在一个地方，Formik 使事情井然有序，从而使测试、重构和推演表单变得轻而易举。

基础知识

我们将从使用 Formik 的最冗长的方式开始。虽然这看起来可能有点啰嗦，但了解 Formik 如何构建自身非常重要，这样您才能全面掌握其可能性，并对它的工作原理有一个完整的认知模型。

假设我们想为博客添加一个新闻通讯注册表单。首先，我们的表单将只有一个名为 email 的字段。使用 Formik，只需要几行代码。

1 import React from 'react';
2 import { useFormik } from 'formik';
3 
4 const SignupForm = () => {
5   // Pass the useFormik() hook initial form values and a submit function that will
6   // be called when the form is submitted
7   const formik = useFormik({
8     initialValues: {
9       email: '',
10     },
11     onSubmit: values => {
12       alert(JSON.stringify(values, null, 2));
13     },
14   });
15   return (
16     <form onSubmit={formik.handleSubmit}>
17       <label htmlFor="email">Email Address</label>
18       <input
19         id="email"
20         name="email"
21         type="email"
22         onChange={formik.handleChange}
23         value={formik.values.email}
24       />
25 
26       <button type="submit">Submit</button>
27     </form>
28   );
29 };

我们将表单的 initialValues 和一个提交函数 (onSubmit) 传递给 useFormik() Hook。然后，该 Hook 将表单状态和辅助方法的“礼包”返回给我们，我们将其称为 formik。目前，我们只关心以下辅助方法

handleSubmit：提交处理程序
handleChange：传递给每个 <input>、<select> 或 <textarea> 的更改处理程序
values：表单的当前值

如上所示，我们将这些值分别传递给其各自的 props……就是这样！我们现在可以使用 Formik 来拥有一个可工作的表单。我们不必自己管理表单的值，也不必为每个输入编写自定义事件处理程序，而只需使用 useFormik() 即可。

这很不错，但是只有一个输入框，使用 useFormik() 的好处就不明显了。所以让我们再添加两个输入框：一个用于用户的姓氏和名字，我们将在表单中将其存储为 firstName 和 lastName。

1 import React from 'react';
2 import { useFormik } from 'formik';
3 
4 const SignupForm = () => {
5   // Note that we have to initialize ALL of fields with values. These
6   // could come from props, but since we don’t want to prefill this form,
7   // we just use an empty string. If we don’t do this, React will yell
8   // at us.
9   const formik = useFormik({
10     initialValues: {
11       firstName: '',
12       lastName: '',
13       email: '',
14     },
15     onSubmit: values => {
16       alert(JSON.stringify(values, null, 2));
17     },
18   });
19   return (
20     <form onSubmit={formik.handleSubmit}>
21       <label htmlFor="firstName">First Name</label>
22       <input
23         id="firstName"
24         name="firstName"
25         type="text"
26         onChange={formik.handleChange}
27         value={formik.values.firstName}
28       />
29 
30       <label htmlFor="lastName">Last Name</label>
31       <input
32         id="lastName"
33         name="lastName"
34         type="text"
35         onChange={formik.handleChange}
36         value={formik.values.lastName}
37       />
38 
39       <label htmlFor="email">Email Address</label>
40       <input
41         id="email"
42         name="email"
43         type="email"
44         onChange={formik.handleChange}
45         value={formik.values.email}
46       />
47 
48       <button type="submit">Submit</button>
49     </form>
50   );
51 };

如果您仔细查看我们的新代码，您会注意到一些模式和对称性正在形成。

我们对每个 HTML 输入框都重复使用相同的更改处理程序函数 handleChange
我们传递一个 id 和 name HTML 属性，它们与我们在 initialValues 中定义的属性匹配
我们使用相同的名称访问字段的值 (email -> formik.values.email)

如果您熟悉使用纯 React 构建表单，您可以将 Formik 的 handleChange 视为这样工作

1 const [values, setValues] = React.useState({});
2 
3 const handleChange = event => {
4   setValues(prevValues => ({
5     ...prevValues,
6     // we use the name to tell Formik which key of `values` to update
7     [event.target.name]: event.target.value
8   });
9 }

验证

虽然我们的联系表单可以工作，但它还没有完全具备功能；用户可以提交它，但它不会告诉他们哪些（如果有）字段是必填的。

如果我们没问题使用浏览器内置的 HTML 输入验证，我们可以为每个输入添加 required 属性，指定最小/最大长度 (maxlength 和 minlength)，或者为这些输入中的每一个添加一个用于正则表达式验证的 pattern 属性。如果我们可以用这些属性解决问题，那就太好了。但是，HTML 验证有其局限性。首先，它只在浏览器中有效！因此，这显然不适用于 React Native。其次，向用户显示自定义错误消息很困难/不可能。第三，它非常笨拙。

如前所述，Formik 不仅跟踪表单的 values，还跟踪其验证和错误消息。若要使用 JS 添加验证，让我们指定一个自定义验证函数，并将其作为 validate 传递给 useFormik() Hook。如果存在错误，此自定义验证函数应生成一个与我们的 values/initialValues 形状匹配的 error 对象。再次……对称性……是的……

1 import React from 'react';
2 import { useFormik } from 'formik';
3 
4 // A custom validation function. This must return an object
5 // which keys are symmetrical to our values/initialValues
6 const validate = values => {
7   const errors = {};
8   if (!values.firstName) {
9     errors.firstName = 'Required';
10   } else if (values.firstName.length > 15) {
11     errors.firstName = 'Must be 15 characters or less';
12   }
13 
14   if (!values.lastName) {
15     errors.lastName = 'Required';
16   } else if (values.lastName.length > 20) {
17     errors.lastName = 'Must be 20 characters or less';
18   }
19 
20   if (!values.email) {
21     errors.email = 'Required';
22   } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
23     errors.email = 'Invalid email address';
24   }
25 
26   return errors;
27 };
28 
29 const SignupForm = () => {
30   // Pass the useFormik() hook initial form values, a validate function that will be called when
31   // form values change or fields are blurred, and a submit function that will
32   // be called when the form is submitted
33   const formik = useFormik({
34     initialValues: {
35       firstName: '',
36       lastName: '',
37       email: '',
38     },
39     validate,
40     onSubmit: values => {
41       alert(JSON.stringify(values, null, 2));
42     },
43   });
44   return (
45     <form onSubmit={formik.handleSubmit}>
46       <label htmlFor="firstName">First Name</label>
47       <input
48         id="firstName"
49         name="firstName"
50         type="text"
51         onChange={formik.handleChange}
52         value={formik.values.firstName}
53       />
54       {formik.errors.firstName ? <div>{formik.errors.firstName}</div> : null}
55 
56       <label htmlFor="lastName">Last Name</label>
57       <input
58         id="lastName"
59         name="lastName"
60         type="text"
61         onChange={formik.handleChange}
62         value={formik.values.lastName}
63       />
64       {formik.errors.lastName ? <div>{formik.errors.lastName}</div> : null}
65 
66       <label htmlFor="email">Email Address</label>
67       <input
68         id="email"
69         name="email"
70         type="email"
71         onChange={formik.handleChange}
72         value={formik.values.email}
73       />
74       {formik.errors.email ? <div>{formik.errors.email}</div> : null}
75 
76       <button type="submit">Submit</button>
77     </form>
78   );
79 };

formik.errors 通过自定义验证函数填充。默认情况下，Formik 将在每次击键（更改事件）、每个输入的失焦事件以及提交之前进行验证。我们传递给 useFormik() 的 onSubmit 函数仅在没有错误时（即如果我们的 validate 函数返回 {}）才会执行。

已访问的字段

虽然我们的表单可以工作，用户也能看到每个错误，但对于他们来说这并不是很好的用户体验。由于我们的验证函数在每次按键时都会针对整个表单的values进行运行，因此我们的errors对象在任何给定时刻都包含所有验证错误。在我们的组件中，我们只是检查是否存在错误，然后立即将其显示给用户。这很尴尬，因为我们将显示用户甚至还没有访问过的字段的错误消息。大多数情况下，我们只希望在用户完成在该字段中输入内容之后才显示该字段的错误消息。

与errors和values类似，Formik 会跟踪哪些字段已被访问过。它将此信息存储在一个名为touched的对象中，该对象也反映了values/initialValues的结构。touched的键是字段名称，touched的值是布尔值true/false。

为了利用touched，我们将formik.handleBlur传递给每个输入的onBlur属性。此函数的工作原理类似于formik.handleChange，它使用name属性来确定要更新哪个字段。

1 import React from 'react';
2 import { useFormik } from 'formik';
3 
4 const validate = values => {
5   const errors = {};
6 
7   if (!values.firstName) {
8     errors.firstName = 'Required';
9   } else if (values.firstName.length > 15) {
10     errors.firstName = 'Must be 15 characters or less';
11   }
12 
13   if (!values.lastName) {
14     errors.lastName = 'Required';
15   } else if (values.lastName.length > 20) {
16     errors.lastName = 'Must be 20 characters or less';
17   }
18 
19   if (!values.email) {
20     errors.email = 'Required';
21   } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
22     errors.email = 'Invalid email address';
23   }
24 
25   return errors;
26 };
27 
28 const SignupForm = () => {
29   const formik = useFormik({
30     initialValues: {
31       firstName: '',
32       lastName: '',
33       email: '',
34     },
35     validate,
36     onSubmit: values => {
37       alert(JSON.stringify(values, null, 2));
38     },
39   });
40   return (
41     <form onSubmit={formik.handleSubmit}>
42       <label htmlFor="firstName">First Name</label>
43       <input
44         id="firstName"
45         name="firstName"
46         type="text"
47         onChange={formik.handleChange}
48         onBlur={formik.handleBlur}
49         value={formik.values.firstName}
50       />
51       {formik.errors.firstName ? <div>{formik.errors.firstName}</div> : null}
52 
53       <label htmlFor="lastName">Last Name</label>
54       <input
55         id="lastName"
56         name="lastName"
57         type="text"
58         onChange={formik.handleChange}
59         onBlur={formik.handleBlur}
60         value={formik.values.lastName}
61       />
62       {formik.errors.lastName ? <div>{formik.errors.lastName}</div> : null}
63 
64       <label htmlFor="email">Email Address</label>
65       <input
66         id="email"
67         name="email"
68         type="email"
69         onChange={formik.handleChange}
70         onBlur={formik.handleBlur}
71         value={formik.values.email}
72       />
73       {formik.errors.email ? <div>{formik.errors.email}</div> : null}
74 
75       <button type="submit">Submit</button>
76     </form>
77   );
78 };

快完成了！现在我们正在跟踪touched，我们可以将错误消息渲染逻辑更改为仅在给定字段的错误消息存在且用户已访问该字段时才显示。

1 import React from 'react';
2 import { useFormik } from 'formik';
3 
4 const validate = values => {
5   const errors = {};
6 
7   if (!values.firstName) {
8     errors.firstName = 'Required';
9   } else if (values.firstName.length > 15) {
10     errors.firstName = 'Must be 15 characters or less';
11   }
12 
13   if (!values.lastName) {
14     errors.lastName = 'Required';
15   } else if (values.lastName.length > 20) {
16     errors.lastName = 'Must be 20 characters or less';
17   }
18 
19   if (!values.email) {
20     errors.email = 'Required';
21   } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
22     errors.email = 'Invalid email address';
23   }
24 
25   return errors;
26 };
27 
28 const SignupForm = () => {
29   const formik = useFormik({
30     initialValues: {
31       firstName: '',
32       lastName: '',
33       email: '',
34     },
35     validate,
36     onSubmit: values => {
37       alert(JSON.stringify(values, null, 2));
38     },
39   });
40   return (
41     <form onSubmit={formik.handleSubmit}>
42       <label htmlFor="firstName">First Name</label>
43       <input
44         id="firstName"
45         name="firstName"
46         type="text"
47         onChange={formik.handleChange}
48         onBlur={formik.handleBlur}
49         value={formik.values.firstName}
50       />
51       {formik.touched.firstName && formik.errors.firstName ? (
52         <div>{formik.errors.firstName}</div>
53       ) : null}
54 
55       <label htmlFor="lastName">Last Name</label>
56       <input
57         id="lastName"
58         name="lastName"
59         type="text"
60         onChange={formik.handleChange}
61         onBlur={formik.handleBlur}
62         value={formik.values.lastName}
63       />
64       {formik.touched.lastName && formik.errors.lastName ? (
65         <div>{formik.errors.lastName}</div>
66       ) : null}
67 
68       <label htmlFor="email">Email Address</label>
69       <input
70         id="email"
71         name="email"
72         type="email"
73         onChange={formik.handleChange}
74         onBlur={formik.handleBlur}
75         value={formik.values.email}
76       />
77       {formik.touched.email && formik.errors.email ? (
78         <div>{formik.errors.email}</div>
79       ) : null}
80 
81       <button type="submit">Submit</button>
82     </form>
83   );
84 };

使用 Yup 进行 Schema 验证

如上所示，验证留给您自己处理。您可以随意编写自己的验证器或使用第三方辅助库。Formik 的作者/其大部分用户使用Jason Quense的库Yup进行对象 Schema 验证。Yup 的 API 类似于Joi和React PropTypes，但它也足够小，可以用于浏览器，并且速度足够快，可以用于运行时使用。您可以使用此REPL进行尝试。

由于 Formik 作者/用户非常喜欢 Yup，因此 Formik 为 Yup 提供了一个特殊的配置属性validationSchema，它会自动将 Yup 的验证错误消息转换为一个漂亮的对象，其键与values/initialValues/touched匹配（就像任何自定义验证函数都必须做的那样）。无论如何，您可以像这样从 NPM/yarn 安装 Yup...

1 npm install yup --save
2 
3 # or via yarn
4 
5 yarn add yup

要了解 Yup 的工作原理，让我们删除自定义验证函数validate，并使用 Yup 和validationSchema重写我们的验证。

1 import React from 'react';
2 import { useFormik } from 'formik';
3 import * as Yup from 'yup';
4 
5 const SignupForm = () => {
6   const formik = useFormik({
7     initialValues: {
8       firstName: '',
9       lastName: '',
10       email: '',
11     },
12     validationSchema: Yup.object({
13       firstName: Yup.string()
14         .max(15, 'Must be 15 characters or less')
15         .required('Required'),
16       lastName: Yup.string()
17         .max(20, 'Must be 20 characters or less')
18         .required('Required'),
19       email: Yup.string().email('Invalid email address').required('Required'),
20     }),
21     onSubmit: values => {
22       alert(JSON.stringify(values, null, 2));
23     },
24   });
25   return (
26     <form onSubmit={formik.handleSubmit}>
27       <label htmlFor="firstName">First Name</label>
28       <input
29         id="firstName"
30         name="firstName"
31         type="text"
32         onChange={formik.handleChange}
33         onBlur={formik.handleBlur}
34         value={formik.values.firstName}
35       />
36       {formik.touched.firstName && formik.errors.firstName ? (
37         <div>{formik.errors.firstName}</div>
38       ) : null}
39 
40       <label htmlFor="lastName">Last Name</label>
41       <input
42         id="lastName"
43         name="lastName"
44         type="text"
45         onChange={formik.handleChange}
46         onBlur={formik.handleBlur}
47         value={formik.values.lastName}
48       />
49       {formik.touched.lastName && formik.errors.lastName ? (
50         <div>{formik.errors.lastName}</div>
51       ) : null}
52 
53       <label htmlFor="email">Email Address</label>
54       <input
55         id="email"
56         name="email"
57         type="email"
58         onChange={formik.handleChange}
59         onBlur={formik.handleBlur}
60         value={formik.values.email}
61       />
62       {formik.touched.email && formik.errors.email ? (
63         <div>{formik.errors.email}</div>
64       ) : null}
65 
66       <button type="submit">Submit</button>
67     </form>
68   );
69 };

再说一次，Yup 是完全可选的。但是，我们建议您尝试一下。如上所示，我们仅用 10 行代码而不是 30 行代码表达了完全相同的验证函数。Formik 的核心设计原则之一是帮助您保持组织。Yup 在这方面绝对很有帮助——Schema 表达性极强，直观（因为它们反映了您的值）且可重用。无论您是否使用 Yup，我们都强烈建议您在整个应用程序中共享常用的验证方法。这将确保通用字段（例如电子邮件、街道地址、用户名、电话号码等）得到一致的验证，并带来更好的用户体验。

减少样板代码

`getFieldProps()`

上面的代码非常明确地说明了 Formik 正在执行的操作。onChange -> handleChange，onBlur -> handleBlur，依此类推。但是，为了节省您的时间，useFormik()返回了一个名为formik.getFieldProps()的辅助方法，以便更快地连接输入。给定一些字段级信息，它会为您返回给定字段的onChange、onBlur、value、checked的精确组。然后，您可以将其扩展到input、select或textarea上。

1 import React from 'react';
2 import { useFormik } from 'formik';
3 import * as Yup from 'yup';
4 
5 const SignupForm = () => {
6   const formik = useFormik({
7     initialValues: {
8       firstName: '',
9       lastName: '',
10       email: '',
11     },
12     validationSchema: Yup.object({
13       firstName: Yup.string()
14         .max(15, 'Must be 15 characters or less')
15         .required('Required'),
16       lastName: Yup.string()
17         .max(20, 'Must be 20 characters or less')
18         .required('Required'),
19       email: Yup.string().email('Invalid email address').required('Required'),
20     }),
21     onSubmit: values => {
22       alert(JSON.stringify(values, null, 2));
23     },
24   });
25   return (
26     <form onSubmit={formik.handleSubmit}>
27       <label htmlFor="firstName">First Name</label>
28       <input
29         id="firstName"
30         type="text"
31         {...formik.getFieldProps('firstName')}
32       />
33       {formik.touched.firstName && formik.errors.firstName ? (
34         <div>{formik.errors.firstName}</div>
35       ) : null}
36 
37       <label htmlFor="lastName">Last Name</label>
38       <input id="lastName" type="text" {...formik.getFieldProps('lastName')} />
39       {formik.touched.lastName && formik.errors.lastName ? (
40         <div>{formik.errors.lastName}</div>
41       ) : null}
42 
43       <label htmlFor="email">Email Address</label>
44       <input id="email" type="email" {...formik.getFieldProps('email')} />
45       {formik.touched.email && formik.errors.email ? (
46         <div>{formik.errors.email}</div>
47       ) : null}
48 
49       <button type="submit">Submit</button>
50     </form>
51   );
52 };

利用 React Context

我们上面的代码再次非常明确地说明了 Formik 正在执行的操作。onChange -> handleChange，onBlur -> handleBlur，依此类推。但是，我们仍然必须手动将每个输入传递给此“prop 获取器”getFieldProps()。为了节省更多时间，Formik 附带了React Context驱动的 API/组件，以简化生活并减少代码冗长：<Formik />、<Form />、<Field />和<ErrorMessage />。更明确地说，它们隐式地使用 React Context 来连接父<Formik />状态/方法。

由于这些组件使用 React Context，因此我们需要渲染一个React Context Provider，在我们的树中保存我们的表单状态和辅助函数。如果您自己这样做，它将如下所示

1 import React from 'react';
2 import { useFormik } from 'formik';
3 
4 // Create empty context
5 const FormikContext = React.createContext({});
6 
7 // Place all of what’s returned by useFormik into context
8 export const Formik = ({ children, ...props }) => {
9   const formikStateAndHelpers = useFormik(props);
10   return (
11     <FormikContext.Provider value={formikStateAndHelpers}>
12       {typeof children === 'function'
13         ? children(formikStateAndHelpers)
14         : children}
15     </FormikContext.Provider>
16   );
17 };

幸运的是，我们已经在<Formik>组件中为您完成了此操作，该组件的工作原理与此完全相同。

现在让我们将useFormik()hook 替换为 Formik 的<Formik>组件/render-prop。由于它是一个组件，我们将传递给useFormik()的对象转换为 JSX，每个键都成为一个属性。

1 import React from 'react';
2 import { Formik } from 'formik';
3 import * as Yup from 'yup';
4 
5 const SignupForm = () => {
6   return (
7     <Formik
8       initialValues={{ firstName: '', lastName: '', email: '' }}
9       validationSchema={Yup.object({
10         firstName: Yup.string()
11           .max(15, 'Must be 15 characters or less')
12           .required('Required'),
13         lastName: Yup.string()
14           .max(20, 'Must be 20 characters or less')
15           .required('Required'),
16         email: Yup.string().email('Invalid email address').required('Required'),
17       })}
18       onSubmit={(values, { setSubmitting }) => {
19         setTimeout(() => {
20           alert(JSON.stringify(values, null, 2));
21           setSubmitting(false);
22         }, 400);
23       }}
24     >
25       {formik => (
26         <form onSubmit={formik.handleSubmit}>
27           <label htmlFor="firstName">First Name</label>
28           <input
29             id="firstName"
30             type="text"
31             {...formik.getFieldProps('firstName')}
32           />
33           {formik.touched.firstName && formik.errors.firstName ? (
34             <div>{formik.errors.firstName}</div>
35           ) : null}
36 
37           <label htmlFor="lastName">Last Name</label>
38           <input
39             id="lastName"
40             type="text"
41             {...formik.getFieldProps('lastName')}
42           />
43           {formik.touched.lastName && formik.errors.lastName ? (
44             <div>{formik.errors.lastName}</div>
45           ) : null}
46 
47           <label htmlFor="email">Email Address</label>
48           <input id="email" type="email" {...formik.getFieldProps('email')} />
49           {formik.touched.email && formik.errors.email ? (
50             <div>{formik.errors.email}</div>
51           ) : null}
52 
53           <button type="submit">Submit</button>
54         </form>
55       )}
56     </Formik>
57   );
58 };

如上所示，我们替换了useFormik()hook 并将其替换为<Formik>组件。<Formik>组件接受一个函数作为其子元素（也称为render prop）。它的参数与useFormik()返回的完全相同对象（实际上，<Formik>在内部调用useFormik()！）。因此，我们的表单与之前的工作原理相同，只是现在我们可以使用新组件以更简洁的方式表达自己。

1 import React from 'react';
2 import { Formik, Field, Form, ErrorMessage } from 'formik';
3 import * as Yup from 'yup';
4 
5 const SignupForm = () => {
6   return (
7     <Formik
8       initialValues={{ firstName: '', lastName: '', email: '' }}
9       validationSchema={Yup.object({
10         firstName: Yup.string()
11           .max(15, 'Must be 15 characters or less')
12           .required('Required'),
13         lastName: Yup.string()
14           .max(20, 'Must be 20 characters or less')
15           .required('Required'),
16         email: Yup.string().email('Invalid email address').required('Required'),
17       })}
18       onSubmit={(values, { setSubmitting }) => {
19         setTimeout(() => {
20           alert(JSON.stringify(values, null, 2));
21           setSubmitting(false);
22         }, 400);
23       }}
24     >
25       <Form>
26         <label htmlFor="firstName">First Name</label>
27         <Field name="firstName" type="text" />
28         <ErrorMessage name="firstName" />
29 
30         <label htmlFor="lastName">Last Name</label>
31         <Field name="lastName" type="text" />
32         <ErrorMessage name="lastName" />
33 
34         <label htmlFor="email">Email Address</label>
35         <Field name="email" type="email" />
36         <ErrorMessage name="email" />
37 
38         <button type="submit">Submit</button>
39       </Form>
40     </Formik>
41   );
42 };

<Field>组件默认情况下会渲染一个<input>组件，该组件在给定name属性的情况下，会隐式地获取相应的onChange、onBlur、value属性并将它们传递给元素以及您传递给它的任何属性。但是，由于并非所有内容都是输入，因此<Field>还接受一些其他属性，让您可以渲染任何您想要的内容。一些例子..

1 // <input className="form-input" placeHolder="Jane"  />
2 <Field name="firstName" className="form-input" placeholder="Jane" />
3 
4 // <textarea className="form-textarea"/></textarea>
5 <Field name="message" as="textarea" className="form-textarea" />
6 
7 // <select className="my-select"/>
8 <Field name="colors" as="select" className="my-select">
9   <option value="red">Red</option>
10   <option value="green">Green</option>
11   <option value="blue">Blue</option>
12 </Field>

React 全都与组合有关，虽然我们减少了很多prop-drilling，但我们仍然在每个输入中重复使用label、<Field>和<ErrorMessage>。我们可以通过抽象做得更好！使用 Formik，您可以并且应该构建可重用的输入基本组件，以便在您的应用程序中共享。事实证明，我们的<Field> render-prop 组件有一个姐妹，她的名字叫useField，它将执行相同操作，但通过 React Hooks！请查看...

1 import React from 'react';
2 import ReactDOM from 'react-dom';
3 import { Formik, Form, useField } from 'formik';
4 import * as Yup from 'yup';
5 
6 const MyTextInput = ({ label, ...props }) => {
7   // useField() returns [formik.getFieldProps(), formik.getFieldMeta()]
8   // which we can spread on <input>. We can use field meta to show an error
9   // message if the field is invalid and it has been touched (i.e. visited)
10   const [field, meta] = useField(props);
11   return (
12     <>
13       <label htmlFor={props.id || props.name}>{label}</label>
14       <input className="text-input" {...field} {...props} />
15       {meta.touched && meta.error ? (
16         <div className="error">{meta.error}</div>
17       ) : null}
18     </>
19   );
20 };
21 
22 const MyCheckbox = ({ children, ...props }) => {
23   // React treats radios and checkbox inputs differently from other input types: select and textarea.
24   // Formik does this too! When you specify `type` to useField(), it will
25   // return the correct bag of props for you -- a `checked` prop will be included
26   // in `field` alongside `name`, `value`, `onChange`, and `onBlur`
27   const [field, meta] = useField({ ...props, type: 'checkbox' });
28   return (
29     <div>
30       <label className="checkbox-input">
31         <input type="checkbox" {...field} {...props} />
32         {children}
33       </label>
34       {meta.touched && meta.error ? (
35         <div className="error">{meta.error}</div>
36       ) : null}
37     </div>
38   );
39 };
40 
41 const MySelect = ({ label, ...props }) => {
42   const [field, meta] = useField(props);
43   return (
44     <div>
45       <label htmlFor={props.id || props.name}>{label}</label>
46       <select {...field} {...props} />
47       {meta.touched && meta.error ? (
48         <div className="error">{meta.error}</div>
49       ) : null}
50     </div>
51   );
52 };
53 
54 // And now we can use these
55 const SignupForm = () => {
56   return (
57     <>
58       <h1>Subscribe!</h1>
59       <Formik
60         initialValues={{
61           firstName: '',
62           lastName: '',
63           email: '',
64           acceptedTerms: false, // added for our checkbox
65           jobType: '', // added for our select
66         }}
67         validationSchema={Yup.object({
68           firstName: Yup.string()
69             .max(15, 'Must be 15 characters or less')
70             .required('Required'),
71           lastName: Yup.string()
72             .max(20, 'Must be 20 characters or less')
73             .required('Required'),
74           email: Yup.string()
75             .email('Invalid email address')
76             .required('Required'),
77           acceptedTerms: Yup.boolean()
78             .required('Required')
79             .oneOf([true], 'You must accept the terms and conditions.'),
80           jobType: Yup.string()
81             .oneOf(
82               ['designer', 'development', 'product', 'other'],
83               'Invalid Job Type'
84             )
85             .required('Required'),
86         })}
87         onSubmit={(values, { setSubmitting }) => {
88           setTimeout(() => {
89             alert(JSON.stringify(values, null, 2));
90             setSubmitting(false);
91           }, 400);
92         }}
93       >
94         <Form>
95           <MyTextInput
96             label="First Name"
97             name="firstName"
98             type="text"
99             placeholder="Jane"
100           />
101 
102           <MyTextInput
103             label="Last Name"
104             name="lastName"
105             type="text"
106             placeholder="Doe"
107           />
108 
109           <MyTextInput
110             label="Email Address"
111             name="email"
112             type="email"
113             placeholder="[email protected]"
114           />
115 
116           <MySelect label="Job Type" name="jobType">
117             <option value="">Select a job type</option>
118             <option value="designer">Designer</option>
119             <option value="development">Developer</option>
120             <option value="product">Product Manager</option>
121             <option value="other">Other</option>
122           </MySelect>
123 
124           <MyCheckbox name="acceptedTerms">
125             I accept the terms and conditions
126           </MyCheckbox>
127 
128           <button type="submit">Submit</button>
129         </Form>
130       </Formik>
131     </>
132   );
133 };

如上所示，useField()使我们能够将任何类型的 React 组件连接到 Formik，就像它是<Field> + <ErrorMessage>一样。我们可以使用它来构建一组满足我们需求的可重用输入。

总结

恭喜！您已使用 Formik 创建了一个注册表单，该表单

具有复杂的验证逻辑和丰富的错误消息
在正确的时间（在他们离开某个字段后）正确地向用户显示错误消息
利用您自己的自定义输入组件，您可以在应用程序中的其他表单上使用它们

干得好！我们希望您现在对 Formik 的工作原理有了很好的了解。

在此处查看最终结果：最终结果。

如果您有额外的时间或想练习您的新 Formik 技能，以下是一些您可以对注册表单进行改进的想法，这些想法按难度递增的顺序列出

在用户尝试提交时禁用提交按钮（提示：formik.isSubmitting）。
使用formik.handleReset或<button type="reset">添加重置按钮。
根据 URL 查询字符串或传递给<SignupForm>的属性预填充initialValues。
当字段有错误且未聚焦时，将输入边框颜色更改为红色。
在字段显示错误并已被访问时，向每个字段添加抖动动画。
将表单状态持久化到浏览器的sessionStorage中，以便在页面刷新之间保留表单进度。

在本教程中，我们介绍了 Formik 的概念，包括表单状态、字段、验证、hook、render prop 和 React context。有关每个主题的更详细说明，请查看其余的文档。要了解有关在本教程中定义组件和 hook 的更多信息，请查看API 参考。

此页面是否有帮助？

在 GitHub 上编辑此页面

教程

开始之前

我们正在构建什么？

先决条件

教程设置

设置选项 1：在浏览器中编写代码

设置选项 2：本地开发环境

我卡住了，怎么办？

概述：什么是 Formik？

基础知识

验证

已访问的字段

使用 Yup 进行 Schema 验证

减少样板代码

`getFieldProps()`

利用 React Context

总结

在此页面上

资源

社区

关于 Formium

订阅我们的时事通讯

教程

开始之前

我们正在构建什么？

先决条件

教程设置

设置选项 1：在浏览器中编写代码

设置选项 2：本地开发环境

我卡住了，怎么办？

概述：什么是 Formik？

基础知识

一个简单的新闻通讯注册表单

验证

已访问的字段

使用 Yup 进行 Schema 验证

减少样板代码

getFieldProps()

利用 React Context

总结

在此页面上

资源

社区

关于 Formium

订阅我们的时事通讯

`getFieldProps()`