下载地址：
https://codesandbox.io/s/zKrK5YLDZ
案例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 (
<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运行原理效果更好。
于是，关键首先集中在下面的问题：
对于上述问题的回答要看接下来的withFormik这个API对于上面表单组件的调用方式。完全回答了这两个问题，内部组成表单各字段内容的表达方面就易于理解了。
封装表单组件的代码如下：
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，既包含了对象和字符串参数，也有函数形式的属性参数。至于各个参数的作用，请参考前面的几篇短文中的相关解释。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
