一、说明

下载地址：
https://codesandbox.io/s/zKrK5YLDZ

案例Basics主要介绍Formik的基本用法，我想在前面几篇的基础上着重分析一下其核心API及数据结构的使用思路。

二、示例架构

我的开发环境为MAC+WebStorm(2017.2) ，案例Basics的架构如下图所示：
Formik官方应用案例解析（一）Basics

工程的运行前，需要先安装系统有关依赖：
npm install

然后，编译运行：
npm start

运行结果如codesandbox.io上的结果一致：
Formik官方应用案例解析（一）Basics

三、核心文件主要组成

本示例核心文件主要是index.js，其主要代码架构如下四部分组件：

// 一）、必要的import依赖导入
import './helper.css';
import { MoreResources, DISPLAY_FORMIK_STATE } from './helper';

import React from 'react';,
import { render } from 'react-dom';
import { withFormik } from 'formik';
import Yup from 'yup';

// 二）、表单组件定义，后面将使用Formik({..}) API进一步包装
const MyInnerForm = props => {
  const {
    ......
  } = props;
  return (
    <form onSubmit={handleSubmit}>
      ......

    </form>
  );
};
//三）、使用Formik进一步包装上面定义的表单组件
const EnhancedForm = withFormik({
 ......
})(MyInnerForm);

const App = () => (
  <div className="app">
    ......
    <EnhancedForm />
    <MoreResources />
  </div>
);
//四）、表单渲染到结果设备
render(<App />, document.getElementById('root'));

四、示例代码详解

（一）表单组件定义

第一部分关键代码是表单组件定义，如下所示：

const MyInnerForm = props => {
  const {    values,    touched,    errors,    dirty,    isSubmitting,handleChange,    handleBlur,    handleSubmit,    handleReset,  } = props;
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="email" style={{ display: 'block' }}> Email</label>
      <input id="email" placeholder="Enter your email" type="text"
        value={values.email}
        onChange={handleChange}
        onBlur={handleBlur}
        className={errors.email && touched.email ? 'text-input error' : 'text-input'}
      />
      {errors.email &&
      touched.email && <div className="input-feedback">{errors.email}</div>}

      <button type="button"  className="outline" onClick={handleReset} disabled={!dirty || isSubmitting} >
        Reset
      </button>
      <button type="submit" disabled={isSubmitting}>
        Submit
      </button>

      <DisplayFormikState {...props} />
    </form>
  );
};

表单定义使用了ES6箭头函数语法格式。看起来，从<form>元素到<input>及<button>等都是使用原始的HTML5元素表达方式（当然，其中也加入了JSX语法格式）。正如本系列文章前面多处重复强调的，我们还是多对比redux-form来理解Formik运行原理效果更好。
于是，关键首先集中在下面的问题：

（1）参数props是谁提供的（即这个表单组件定义在哪里调用）？

（2）参数props包含了哪些内容？

对于上述问题的回答要看接下来的withFormik这个API对于上面表单组件的调用方式。完全回答了这两个问题，内部组成表单各字段内容的表达方面就易于理解了。

（二）使用Formik包装表单组件

封装表单组件的代码如下：

const EnhancedForm = withFormik({
  mapPropsToValues: () => ({ email: '' }),
  validationSchema: Yup.object().shape({
    email: Yup.string()
      .email('Invalid email address')
      .required('Email is required!'),
  }),
  handleSubmit: (values, { setSubmitting }) => {
    setTimeout(() => {
      alert(JSON.stringify(values, null, 2));
      setSubmitting(false);
    }, 1000);
  },
  displayName: 'BasicForm', // helps with React DevTools
})(MyInnerForm);

Formik官方应用案例解析（一）Basics