概述

让我们面对现实，表单在 React 中非常冗长。更糟糕的是，大多数表单助手都做了太多“魔法”，并且通常与它们相关的性能成本很高。Formik 是一个小型库，可以帮助您解决三个最令人头疼的部分

将值输入和输出表单状态
验证和错误消息
处理表单提交

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

动机

我 (@jaredpalmer) 在与 @eonwhite 构建大型内部管理仪表板时编写了 Formik。大约有 30 个独特的表单，很快我们就意识到，我们可以通过标准化我们的输入组件以及数据流经表单的方式来获益。

为什么不使用 Redux-Form？

到现在为止，您可能在想，“为什么不直接使用 Redux-Form？” 这是一个好问题。

根据我们的先知 Dan Abramov，表单状态本质上是短暂的和局部的，因此在 Redux（或任何类型的 Flux 库）中跟踪它是没有必要的
Redux-Form 会在每次按键时多次调用您的整个顶级 Redux reducer。对于小型应用程序来说，这很好，但是随着 Redux 应用程序的增长，如果您使用 Redux-Form，输入延迟将持续增加。
Redux-Form 压缩后大小为 22.5 kB（Formik 为 12.7 kB）

我使用 Formik 的目标是创建一个可扩展、高性能的表单助手，它具有最小的 API，可以完成真正令人头疼的事情，并将其他事情留给您。

我在 React Alicante 的演讲更深入地探讨了 Formik 的动机和理念，介绍了该库（通过观看我构建它的迷你版本），并演示了如何使用真实库构建一个非平凡的表单（带有数组、自定义输入等）。

影响

Formik 最初是基于这个小的高阶组件（由 Brent Jackson 编写），一些来自 Redux-Form 的命名约定，以及（最近）由 React-Motion 和 React-Router 4 推广的 render props 方法。无论您是否使用过上述任何一种方法，Formik 都只需几分钟即可上手。

安装

您可以使用 NPM、Yarn 或通过 unpkg.com 使用传统的 <script> 安装 Formik。

NPM

 npm install formik --save

或

 yarn add formik

Formik 与 React v15+ 兼容，并适用于 ReactDOM 和 React Native。

您也可以在购买前尝试一下这个 **Formik 在 CodeSandbox.io 上的演示**

浏览器游乐场

您可以在 Web 浏览器中使用这些在线游乐场来体验 Formik。

要点

Formik 跟踪表单的状态，然后通过 props 将其以及一些可重用方法和事件处理程序（handleChange、handleBlur 和 handleSubmit）公开给您的表单。handleChange 和 handleBlur 的工作方式与预期完全一样——它们使用 name 或 id 属性来确定要更新哪个字段。

1 import React from 'react';
2 import { Formik } from 'formik';
3 
4 const Basic = () => (
5   <div>
6     <h1>Anywhere in your app!</h1>
7     <Formik
8       initialValues={{ email: '', password: '' }}
9       validate={values => {
10         const errors = {};
11         if (!values.email) {
12           errors.email = 'Required';
13         } else if (
14           !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
15         ) {
16           errors.email = 'Invalid email address';
17         }
18         return errors;
19       }}
20       onSubmit={(values, { setSubmitting }) => {
21         setTimeout(() => {
22           alert(JSON.stringify(values, null, 2));
23           setSubmitting(false);
24         }, 400);
25       }}
26     >
27       {({
28         values,
29         errors,
30         touched,
31         handleChange,
32         handleBlur,
33         handleSubmit,
34         isSubmitting,
35         /* and other goodies */
36       }) => (
37         <form onSubmit={handleSubmit}>
38           <input
39             type="email"
40             name="email"
41             onChange={handleChange}
42             onBlur={handleBlur}
43             value={values.email}
44           />
45           {errors.email && touched.email && errors.email}
46           <input
47             type="password"
48             name="password"
49             onChange={handleChange}
50             onBlur={handleBlur}
51             value={values.password}
52           />
53           {errors.password && touched.password && errors.password}
54           <button type="submit" disabled={isSubmitting}>
55             Submit
56           </button>
57         </form>
58       )}
59     </Formik>
60   </div>
61 );
62 
63 export default Basic;

减少样板代码

上面的代码非常明确地说明了 Formik 在做什么。onChange -> handleChange、onBlur -> handleBlur，依此类推。但是，为了节省您的时间，Formik 附带了一些额外的组件，使生活更轻松、更简洁：<Form />、<Field /> 和 <ErrorMessage />。它们使用 React 上下文来挂接到父 <Formik /> 状态/方法上。

1 // Render Prop
2 import React from 'react';
3 import { Formik, Form, Field, ErrorMessage } from 'formik';
4 
5 const Basic = () => (
6   <div>
7     <h1>Any place in your app!</h1>
8     <Formik
9       initialValues={{ email: '', password: '' }}
10       validate={values => {
11         const errors = {};
12         if (!values.email) {
13           errors.email = 'Required';
14         } else if (
15           !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
16         ) {
17           errors.email = 'Invalid email address';
18         }
19         return errors;
20       }}
21       onSubmit={(values, { setSubmitting }) => {
22         setTimeout(() => {
23           alert(JSON.stringify(values, null, 2));
24           setSubmitting(false);
25         }, 400);
26       }}
27     >
28       {({ isSubmitting }) => (
29         <Form>
30           <Field type="email" name="email" />
31           <ErrorMessage name="email" component="div" />
32           <Field type="password" name="password" />
33           <ErrorMessage name="password" component="div" />
34           <button type="submit" disabled={isSubmitting}>
35             Submit
36           </button>
37         </Form>
38       )}
39     </Formik>
40   </div>
41 );
42 
43 export default Basic;

阅读以下内容以获取更多信息…

补充包

如上所示，验证留给您自己处理。您可以自由编写自己的验证器或使用第三方库。就我个人而言，我使用 Yup 进行对象模式验证。它具有与 Joi / React PropTypes 非常相似的 API，但它足够小，可以用于浏览器，并且速度足够快，可以用于运行时使用。因为我非常喜欢 Yup，所以 Formik 有一个特殊的配置选项/属性用于 Yup，称为 validationSchema，它会自动将 Yup 的验证错误转换为一个漂亮的对象，其键与 values 和 touched 匹配。无论如何，您可以从 npm 安装 Yup…