概述

让我们面对现实吧，React 中的表单确实非常冗长。更糟糕的是，大多数表单助手做了太多的魔法，并且通常会带来显着的性能成本。Formik 是一个小型库，可以帮助你解决 3 个最烦人的部分：

¥Let's face it, forms are really verbose in React. To make matters worse, most form helpers do wayyyy too much magic and often have a significant performance cost associated with them. Formik is a small library that helps you with the 3 most annoying parts:

从表单状态获取值和从表单状态获取值
¥Getting values in and out of form state
验证和错误消息
¥Validation and error messages
处理表单提交
¥Handling form submission

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

¥By colocating all of the above in one place, Formik will keep things organized--making testing, refactoring, and reasoning about your forms a breeze.

动机

¥Motivation

我（@jaredpalmer）在使用 @eonwhite 构建大型内部管理仪表板时编写了 Formik。有了大约 30 种独特的表单，我们很快就发现，我们不仅可以通过标准化我们的输入组件，还可以通过标准化数据在表单中流动的方式而受益。

¥I (@jaredpalmer) wrote Formik while building a large internal administrative dashboard with @eonwhite. With around ~30 unique forms, it quickly became obvious that we could benefit by standardizing not just our input components but also the way in which data flowed through our forms.

为什么不使用 Redux-Form 呢？

¥Why not Redux-Form?

现在，你可能会想，“为什么不直接使用 Redux 形式呢？” 好问题。

¥By now, you might be thinking, "Why didn't you just use Redux-Form?" Good question.

根据我们的先知丹·阿布拉莫夫 (Dan Abramov) 的说法，表单状态本质上是短暂的和本地的，因此没有必要在 Redux（或任何类型的 Flux 库）中跟踪它
¥According to our prophet Dan Abramov, form state is inherently ephemeral and local, so tracking it in Redux (or any kind of Flux library) is unnecessary
Redux-Form 在每次按键时都会多次调用整个顶层 Redux reducer。这对于小型应用来说很好，但是随着你的 Redux 应用的增长，如果你使用 Redux-Form，输入延迟将继续增加。
¥Redux-Form calls your entire top-level Redux reducer multiple times ON EVERY SINGLE KEYSTROKE. This is fine for small apps, but as your Redux app grows, input latency will continue to increase if you use Redux-Form.
Redux-Form 压缩压缩后大小为 22.5 kB（Formik 为 12.7 kB）
¥Redux-Form is 22.5 kB minified gzipped (Formik is 12.7 kB)

我对 Formik 的目标是创建一个可扩展、高性能的表单助手，它具有最小的 API，可以完成真正烦人的事情，剩下的就交给你了。

¥My goal with Formik was to create a scalable, performant, form helper with a minimal API that does the really really annoying stuff, and leaves the rest up to you.

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

¥My talk at React Alicante goes much deeper into Formik's motivation and philosophy, introduces the library (by watching me build a mini version of it), and demos how to build a non-trivial form (with arrays, custom inputs, etc.) using the real thing.

https://www.youtube.com/embed/oiNtnehlaTo

影响

¥Influences

Formik 首先通过布伦特·杰克逊在这个高阶组件上进行了扩展，Redux-Form 中的一些命名约定，以及（最近）由反应运动和 React-Router 4 普及的渲染属性方法。无论你是否使用过上述任何一项，Formik 只需几分钟即可上手。

¥Formik started by expanding on this little higher order component by Brent Jackson, some naming conventions from Redux-Form, and (most recently) the render props approach popularized by React-Motion and React-Router 4. Whether you have used any of the above or not, Formik only takes a few minutes to get started with.

安装

¥Installation

你可以通过 NPM、Yarn 或 unpkg.com 安装 Formik。

¥You can install Formik with NPM, Yarn, or a good ol' <script> via unpkg.com.

NPM

 npm install formik --save

 yarn add formik

Formik 与 React v15+ 兼容，并可与 ReactDOM 和 React Native 配合使用。

¥Formik is compatible with React v15+ and works with ReactDOM and React Native.

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

¥You can also try before you buy with this demo of Formik on CodeSandbox.io

浏览器内在线运行

¥In-browser Playgrounds

你可以在网络浏览器中通过这些实时在线运行与 Formik 一起玩。

¥You can play with Formik in your web browser with these live online playgrounds.

要旨

¥The Gist

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

¥Formik keeps track of your form's state and then exposes it plus a few reusable methods and event handlers (handleChange, handleBlur, and handleSubmit) to your form via props. handleChange and handleBlur work exactly as expected--they use a name or id attribute to figure out which field to update.

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;

减少样板

¥Reducing boilerplate

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

¥The code above is very explicit about exactly what Formik is doing. onChange -> handleChange, onBlur -> handleBlur, and so on. However, to save you time, Formik comes with a few extra components to make life easier and less verbose: <Form />, <Field />, and <ErrorMessage />. They use React context to hook into the parent <Formik /> state/methods.

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;

阅读下文了解更多信息...

¥Read below for more information...

配套包

¥Complementary Packages

正如你在上面看到的，验证由你决定。你可以随意编写自己的验证器或使用第三方库。就我个人而言，我使用是的进行对象模式验证。它有一个与 Joi / React PropTypes 非常相似的 API，但对于浏览器来说足够小，对于运行时使用来说足够快。因为我❤️ Yup 太多了，Formik 有一个名为 validationSchema 的特殊配置选项/属性，它会自动将 Yup 的验证错误转换为一个漂亮的对象，其密钥与 values 和 touched 匹配。不管怎样，你可以从 npm 安装 Yup...

¥As you can see above, validation is left up to you. Feel free to write your own validators or use a 3rd party library. Personally, I use Yup for object schema validation. It has an API that's pretty similar to Joi / React PropTypes but is small enough for the browser and fast enough for runtime usage. Because I ❤️ Yup sooo much, Formik has a special config option / prop for Yup called validationSchema which will automatically transform Yup's validation errors into a pretty object whose keys match values and touched. Anyways, you can install Yup from npm...

 npm install yup --save

 yarn add yup

Next教程

概述

动机

为什么不使用 Redux-Form 呢？

影响

安装

NPM

浏览器内在线运行

要旨

减少样板

配套包

On this page