一、说明

---

---

下载地址：

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

二、示例架构

我的开发环境为MAC+WebStorm(2017.2) ，案例Basics的架构如下图所示：

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

npm install

然后，编译运行：

npm start

运行结果如codesandbox.io上的结果一致：

三、核心文件主要组成

本示例核心文件主要是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 (    
    
           ......    
    
  );};//三）、使用Formik进一步包装上面定义的表单组件const EnhancedForm = withFormik({ ......})(MyInnerForm);const App = () => (  
    
         ......    
         
       
    
);//四）、表单渲染到结果设备render(
    , document.getElementById('root'));

四、示例代码详解

（一）表单组件定义

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

const MyInnerForm = props => {  const {    values,    touched,    errors,    dirty,    isSubmitting,handleChange,    handleBlur,    handleSubmit,    handleReset,  } = props;  return (    
    
      
      Email      
           {errors.email &&      touched.email && 
     
      {errors.email}
     
}      
             Reset            
             Submit            
         
      );};

表单定义使用了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);

对于withFormik(options)这个API中各参数的解释在本系列前文中已经有详细注释，在此再重点强调几点。

（1）displayName参数是为便于调试使用的一个唯一字符串标记；（2）对于参数mapPropsToValues要作一下详细解说。如果指定了这个选项，Formik会把这个函数的执行结果（典型情况下会返回一个对象，本例中正是如此）转换成可更新的表单状态，并且使这个结果可以在新组件中进行访问（访问形式是props.values）。如果没有指定这个选项，Formik会把所有不是函数的属性内容映射到内部组件的props.values。也就是说，如果你忽略这个参数，Formik将仅传递不是函数的属性内容（where typeof props[k] !== 'function'，其中k是某种键）。需要说明的是，即使你的表单没有从其父组件中接收任何属性，你也可以使用mapPropsToValues来把你的表单初始化成空状态。（3）参数validationSchema定义了一个Yup模式（开源Yup库，是Formik作者也是本人认为在使用Formik过程中优先选择使用的校验工具——如果你有良好的ES6基础，你会发现这个校验工具比较全面且直观易用）。本例中用于校验电子邮件的格式并给出可能的错误提示。（4）handleSubmit是表单提交处理器函数。其中，values是要提交的表单数据；setSubmitting是handleSubmit的参数FormikBag中的一种取值，这里把setSubmitting的参数设置为false，意指当前表单并未正处于提交状态（因为这里仅使用简单的模拟方式来演示提交），并且会导致isSubmitting属性的值为false。

（三）使用并渲染表单组件

接下来的代码比较简单了：

const App = () => (  
    
    
     
              Formik      {' '}      基础示例    
    
         
       
    
);render(
    , document.getElementById('root'));

把EnhancedForm作为一个普通React组件加入到系统父组件中，并通过调用react-dom库的render方式随着父组件一起渲染我们的表单组件。

另外，上面代码中的简单组件MoreResources定义于另一个独立文件中，用于展示官方的其他链接示例。有关代码非常简单，在此不再赘述。

（四）再回看表单组件定义代码

有了对上面withFormik(options)这个高阶组件API中各个参数含义的理解，再来看最前面定义表单组件部分的代码（相对于redux-form实现逻辑）就简单多了。

类似于redux-form表单参数中的props，既包含了对象和字符串参数，也有函数形式的属性参数。至于各个参数的作用，请参考前面的几篇短文中的相关解释。