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

发布时间：2020-06-04 11:40:05 作者：googlingman
来源：网络阅读：3330

一、说明

下载地址：
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);

对于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 = () => (
  <div className="app">
    <h2>
      <a href="https://github.com/jaredpalmer/formik" target="_blank" rel="noopener">
        Formik
      </a>{' '}
      基础示例
    </h2>

    <EnhancedForm />
    <MoreResources />
  </div>
);

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

把EnhancedForm作为一个普通React组件加入到系统父组件中，并通过调用react-dom库的render方式随着父组件一起渲染我们的表单组件。
另外，上面代码中的简单组件MoreResources定义于另一个独立文件中，用于展示官方的其他链接示例。有关代码非常简单，在此不再赘述。

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

有了对上面withFormik(options)这个高阶组件API中各个参数含义的理解，再来看最前面定义表单组件部分的代码（相对于redux-form实现逻辑）就简单多了。
类似于redux-form表单参数中的props，既包含了对象和字符串参数，也有函数形式的属性参数。至于各个参数的作用，请参考前面的几篇短文中的相关解释。