让你的React表单操作更优雅（formik+yup）

让你的React表单操作更优雅（formik+yup）

表单操作在React中一直是一件比较繁琐的事情，使用formik可以极大的简化表单操作，formik的slogan就是Build forms in React, without the tears ?

formik介绍

在介绍formik之前，我们先来说说日常操作form表单中的一些痛点。

当我们想要访问表单中的input控件的值时，通常有两种操作，一种是使用ref去得到dom结构，第二种是使用state存储value。首先，针对于第一种情况，虽然使用ref能够让我们很方便的获取到dom节点，进而获取input的值，但是需要注意的是当我们在使用React的时候，我们需要时刻告诉自己，不要直接操作dom！不要直接操作dom！不要直接操作dom！官方也是不推荐该做法的； 对于第二种做法，虽然这是官方推荐的做法，当时由于绑定了state，所以form表单中的控件也变成了受控组件，如果我们想真正改动其数据，我们往往需要再绑定一个onChange事件，当控件过多时，操作也是非常繁琐的。

而formik的出现，将表单操作化繁为简，使得表单操作变得非常的简单。formik不仅提供了针对的表单的状态管理，还能很方便的对表单做规则校验。其实formik的原理很简单：它内置了表单的state管理操作，无需我们在单独为表单建立state，同时使用了Context，能够让表单组件多层嵌套，不再需要我们一层层传递。

入门例子

我们以一个简单的例子来看看formik到底是如何使用的，它又怎样简化了表单的操作。

• 姓名（name）: 必填非空
• 性别（gender）: 必选非空
• 年龄（age）:必填非空，大于0的整数

formik提供了一个名为Formik的组件，组件包含了initialValues，validate,onSubmit,render等props（不限于此，列举出来的只是当前用到的关键的props，完整结构详解Formik API，下面解释一个各个prop作用：

• initialValues：初始化表单的数据
• validate：表单规则校验，返回一个错误信息的对象
• onSubmit: 获得表单各个字段，自定义自己的业务操作
• render: 表单内部的children组件

针对内部的表单，render方法会传入一个props，props包括了values，errors，handleSubmit，handleChange，handleBlur等属性（更详细的内容参见完整props，其中：

• values：对应的就是表单各项数据
• errors：validate所返回的表单校验后的错误信息
• touched：表示表单内的控件是否已经被操作过
• handleSubmit：是表单触发提交事件后的formik对提交流程处理事件，规则校验就在其中
• handleChane: 更改表单数据的事件
• handleBlur: 控件失去焦点后的操作事件，会进行对表单进行规则校验的流程

示例代码如下：

<FormikinitialValues={{name: "",gender: "",age: ""}}validate={values => {let errors = {};if (values.name.length === 0) {errors.name = "Name can not be empty"}if (der.length === 0) {der = "You must choose a gender"}if (values.age <= 0 || values.age % 1 !== 0) {errors.age = "Age must be a Positive Integer"}return errors;}}onSubmit={(values) => {console.log(values)}}render={props =><form onSubmit={props.handleSubmit}><div className="content"><div><label>姓名： </label><input type="text" id="name" name="name" value={props.values.name}onChange={props.handleChange} onBlur={props.handleBlur}/>
{uched.name && s.name && <div>{s.name}</div>}</div><div><label>性别： </label><input type="radio" id="male" value="male" name="gender" onChange={props.handleChange}onBlur={props.handleBlur}/> <label htmlFor="male">男</label><input type="radio" id="female" value="female" name="gender" onChange={props.handleChange}onBlur={props.handleBlur}/> <label htmlFor="female">女</label>
{der && der && <div>{der}</div>}</div><div><label>年龄： </label><input type="number" id="age" name="age" value={props.values.age}onChange={props.handleChange} onBlur={props.handleBlur}/>
{uched.age && s.age && <div>{s.age}</div>}</div><div className="submit-area"><button type="submit">提交</button></div></div></form>}/>
复制代码

注意：在输出错误信息的时候，通常有touched.name&&errors.name的判断，这是因为formik在做表单校验的时候，会将全字段都检查一遍，不管用户有没有操作，但是对于用户来说，通常不希望在还没有操作的字段显示一行错误信息，所以需要touched字段查看该字段是否已经操作过，操作过并且有错误，才显示。 通过例子可以看出，通过Formik组件传入初始字段，校验规则，提交事件；并在表单中绑定上handleSubmit，handleChange，handleBlur等事件后，我们就能够实现一个简单表单操作。

但是我们依旧可以看出在每一个输入控件的地方，都重复的绑定了onChange，onBlur等事件，并且每个输入错误信息的方式都是很重复的，这显得有点累赘。但是好在formik提交了Form，Field，ErrorMessage等封装好的组件，用于减少重复的工作，代码如下：

&//same as beforerender={props =><Form><div className="content"><div><label>姓名： </label><Field name="name"/>
<ErrorMessage name="name"/></div><div><label>性别： </label><Field name="gender" render={({field}) =><input type="radio" name={field.name} value="male" checked={field.value === "male"}onChange={Change}onBlur={Blur}/>}/><label htmlFor="male">男</label><Field name="gender" render={({field}) =><input type="radio" name={field.name} value="female" checked={field.value === "female"}onChange={Change}onBlur={Blur}/>}/> <label htmlFor="female">女</label>
<ErrorMessage name="gender"/></div><div><label>年龄： </label><Field name="age"/>
<ErrorMessage name="age"/></div><div className="submit-area"><button type="submit">提交</button></div></div></Form>}/>
复制代码

可以看出，使用formik提供的组件还能进一步简化代码，通过对比可以看出，Form组件想到与form加上onSubmit；ErrorMessage组件就是将touched,errors等一系列判断包裹了起来；Field组件则是封装了onChange，onBlur，value等属性，需要注意的是对于radio，checkbox，select等控件需要单独做一些特殊处理，通常使用其render方法来自定义，除此之外，因为有了render方法，使得Field也能很好的和其他的第三方封装的控件结合。

此外，formik针对数组类型属性也有很好的支持，现在让我们在表单里面加一个字段，表单样式如下：

我们为表单添加了一个addresses字段，它是一个存储地址的数据，它的验证规则是至少有一个非空的字段。

formik提供了一个FieldArray的组件专门处理数组类型字段，代码如下：

<FormikinitialValues={{name: "",gender: "",age: "",addresses: [""]}}validate={values => {let errors = {};if (values.name.length === 0) {errors.name = "Name can not be empty"}if (der.length === 0) {der = "You must choose a gender"}if (values.age <= 0 || values.age % 1 !== 0) {errors.age = "Age must be a Positive Integer"}let addresses = values.addresses.filter(address => im() !== "");if (addresses.length === 0) {errors.addresses = "Addresses must have 1 address at least"}return errors;}}onSubmit={(values) => {console.log(values)}}render={props =><Form><div className="content">......// same as before<div><label>地址： </label><FieldArray name="addresses" render={arrayHelper =><div>{props.values.addresses.map((address, index) =><div className="address"><Field name={`addresses.${index}`}/><div className="address_add" onClick={() => {arrayHelper.push("")}}>+</div></div>)}</div>}/><ErrorMessage name="addresses" component="div" className="error"/></div><div className="submit-area"><button type="submit">提交</button></div></div></Form>}/>
复制代码

可以看到，使用FieldArray时，它会提供一个arrayHelper的参数，我们可以通过arrayHelper很方便去操作数组的数组，如push，pop等等（更详细的参见完整arrayHelper API）

到此为止，就是formik的基本功能的介绍了。

注入Yup

虽然formik已经极大的方便了表单的操作，但是我们还是可以看到在做表单验证的时候，写的代码还是比较繁琐，这个时候就需要yup出场了，yup的专长就是做规则校验。并且聪明的formik作者在设计formik的时候就让其很好的支持yup了。

yup的官方介绍：Yup is a JavaScript object schema validator and object parser.

在Formik组件里有一个名为validationSchema的prop，这个就是为yup留出的接口。 话不多说，先show代码：

//没有yup的情况
<Formikvalidate={values => {let errors = {};if (values.name.length === 0) {errors.name = "Name can not be empty"}if (der.length === 0) {der = "You must choose a gender"}if (values.age <= 0 || values.age % 1 !== 0) {errors.age = "Age must be a Positive Integer"}let addresses = values.addresses.filter(address => im() !== "");if (addresses.length === 0) {errors.addresses = "Addresses must have 1 address at least"}return errors;}}//....../>//使用yup的情况<FormikvalidationSchema={Yup.object().shape({name: Yup.string().trim().required("Name can not be empty"),gender: Yup.string().required("You must choose a gender"),age: Yup.number().moreThan(0, "Age must be greater than 0").integer("Age must be a integer"),addresses: Yup.array()pact().min(1, "Addresses must have 1 address at least")})}//....../>
复制代码

可以看到使用Yup后，不管是从代码量，还是可读性来看都提交了很多，尤其是在表单非常复杂时，这之间的优化会非常的明显。

可以看到Yup的操作非常的语义化，所以学习成本非常的低，你只需要知道它的api，就能很轻易的使用它，所以对Yup的使用不再赘述，详细信息参见Yup文档。

结语

本文也只是对formik+yup做了简单的入门介绍，只做抛砖引玉。其实他们的厉害之处不仅于此，大家可以尽情的探索。 如想查看源码点击表单代码链接

如果对本文有什么意见和建议，欢迎讨论和指正！！！