让我们面对现实吧：在 React 里写表单是一件挺麻烦的事情。许多的表单库充满了花里胡哨的代码技巧，但不少时候却会成为拖慢性能的短板。而 Formik，使得用 React 构建表单变得更为简单，减轻了各种繁琐的工作。

简介

Formik，是 formium 在 Github 上开源的 React 表单库，项目位于 https://github.com/formium/formik，目前版本为 v2.1.5。Formik 可以减轻在构建表单时的繁琐工作，主要体现在以下3个方面：

• 从表单状态中获取和写入数据；
• 表单验证和错误提示；
• 处理表单提交逻辑。

Formik 使得表单构建的逻辑更为紧凑和有组织，进一步使得测试、重构等工作更为简单。

安装

Formik 需要 React v15+，可以兼容 ReactDOM 和 React Native，且十分轻量，压缩后约 12.7 KB。可以使用 NPM 安装：

 npm install formik --save

也可以用 YARN 安装：

 yarn add formik

还可以在浏览器直接使用 CDN 引入：

 <script src="https://unpkg.com/formik/dist/formik.umd.production.min.js"></script>

示例

Formik使用简单，其把一些表单中共有的部分和功能逻辑打包成了子组件，方便构建使用。我们来看一个基本的使用例子：

import React from 'react';
import ReactDOM from 'react-dom';
import { Formik, Field, Form } from 'formik';

const Basic = () => (
  <div>
    <h1>Sign Up</h1>
    <Formik
      initialValues={{
        firstName: '',
        lastName: '',
        email: '',
      }}
      onSubmit={async values => {
        await new Promise(r => setTimeout(r, 500));
        alert(JSON.stringify(values, null, 2));
      }}
    >
      <Form>
        <label htmlFor="firstName">First Name</label>
        <Field id="firstName" name="firstName" placeholder="Jane" />

        <label htmlFor="lastName">Last Name</label>
        <Field id="lastName" name="lastName" placeholder="Doe" />

        <label htmlFor="email">Email</label>
        <Field
          id="email"
          name="email"
          placeholder="jane@acme.com"
          type="email"
        />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  </div>
);

ReactDOM.render(<Basic />, document.getElementById('root'));

使用 Formik 组件，使用 onSubmit 定义表单提交逻辑。Formik 组件的内容为一个 Form 元素，使用 Formik 提供的 Field 定义输入控件。最后进行渲染，得到以下的简单表格：

我们来看一个复杂一些的例子：

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';

const Basic = () => (
  <div>
    <h1>Any place in your app!</h1>
    <Formik
      initialValues={{ email: '', password: '' }}
      validate={values => {
        const errors = {};
        if (!values.email) {
          errors.email = 'Required';
        } else if (
          !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
        ) {
          errors.email = 'Invalid email address';
        }
        return errors;
      }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <Field type="email" name="email" />
          <ErrorMessage name="email" component="div" />
          <Field type="password" name="password" />
          <ErrorMessage name="password" component="div" />
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  </div>
);

export default Basic;

在这个例子中，我们加入了validate表单验证规则，可以灵活定义表单验证逻辑和错误提示消息。然后，表单内容通过 isSubmitting 控制渲染，其中使用 Formik 的 Field 和 ErrorMessage 对输入控件和错误消息控件进行打包，很方便就能进行抽象层级的控制，极大地简化了表单的设计。

总结

Formik 作为一个 React 的表单组件库，使得组件构建工作变得简单，其简明的逻辑和组件化抽象的设计思想，使得 React 表单的设计、构建、乃至以之后的维护工作，都变得更为简单，值得使用。