Formik官方应用案例解析(一)Basics

一、说明



下载地址:
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">
    <h1>
      <a href="https://github.com/jaredpalmer/formik" target="_blank" rel="noopener">
        Formik
      </a>{' '}
      基础示例
    </h1>

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

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

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

(四)再回看表单组件定义代码

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

相关文章
相关标签/搜索