让你的React表单操作更优雅(formik+yup)

栏目: IOS · Android · 发布时间: 5年前

内容简介:表单操作在React中一直是一件比较繁琐的事情,使用formik可以极大的简化表单操作,formik的slogan就是在介绍formik之前,我们先来说说日常操作form表单中的一些痛点。当我们想要访问表单中的input控件的值时,通常有两种操作,一种是使用ref去得到dom结构,第二种是使用state存储value。首先,针对于第一种情况,虽然使用ref能够让我们很方便的获取到dom节点,进而获取input的值,但是需要注意的是当我们在使用React的时候,我们需要时刻告诉自己,不要直接操作dom!不要直

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

让你的React表单操作更优雅(formik+yup)

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到底是如何使用的,它又怎样简化了表单的操作。

让你的React表单操作更优雅(formik+yup)

我们该表单作为例子,表单包含了姓名,性别,年龄三个字段,一个提交按钮,给定表单规则如下:

  • 姓名(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: 控件失去焦点后的操作事件,会进行对表单进行规则校验的流程

示例代码如下:

<Formik
          initialValues={{
            name: "",
            gender: "",
            age: ""
          }}
          validate={values => {
            let errors = {};
            if (values.name.length === 0) {
              errors.name = "Name can not be empty"
            }
            if (values.gender.length === 0) {
              errors.gender = "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}/>
{props.touched.name && props.errors.name && <div>{props.errors.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>
{props.touched.gender && props.errors.gender && <div>{props.errors.gender}</div>}
                </div>
                <div>
                  <label>年龄: </label><input type="number" id="age" name="age" value={props.values.age}
                                            onChange={props.handleChange} onBlur={props.handleBlur}/>
{props.touched.age && props.errors.age && <div>{props.errors.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等封装好的组件,用于减少重复的工作,代码如下:

<Formik
          ......
        //same as before
          render={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={field.onChange}
                           onBlur={field.onBlur}/>
                  }/>
                  <label htmlFor="male">男</label>
                  <Field name="gender" render={({field}) =>
                    <input type="radio" name={field.name} value="female" checked={field.value === "female"}
                           onChange={field.onChange}
                           onBlur={field.onBlur}/>
                  }/> <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针对数组类型属性也有很好的支持,现在让我们在表单里面加一个字段,表单样式如下:

让你的React表单操作更优雅(formik+yup)

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

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

<Formik
          initialValues={{
            name: "",
            gender: "",
            age: "",
            addresses: [""]
          }}
          validate={values => {
            let errors = {};
            if (values.name.length === 0) {
              errors.name = "Name can not be empty"
            }
            if (values.gender.length === 0) {
              errors.gender = "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 => address.trim() !== "");
            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的情况
<Formik
          validate={values => {
            let errors = {};
            if (values.name.length === 0) {
              errors.name = "Name can not be empty"
            }
            if (values.gender.length === 0) {
              errors.gender = "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 => address.trim() !== "");
            if (addresses.length === 0) {
              errors.addresses = "Addresses must have 1 address at least"
            }
            return errors;
          }}
       //......
        />


//使用yup的情况
 <Formik
          validationSchema={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().compact().min(1, "Addresses must have 1 address at least")
          })}
      //......
       />
复制代码

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

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


以上所述就是小编给大家介绍的《让你的React表单操作更优雅(formik+yup)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

驯服烂代码

驯服烂代码

伍斌 / 机械工业出版社 / 2014-11 / 69.00

Kent Beck、Martin Fowler、Michael C. Feathers、Robert C. Martin、Joshua Kerievsky、Gerard Meszaros等大师们的传世著作为如何提升编程技艺和代码质量提供了思想和原则上的指导,本书则为实践和融合这些思想、原则提供了过程和方法上指导。本书通过编程操练的方式讲述了如何用TDD(测试驱动开发)的方法来驯服烂代码,通过结对编......一起来看看 《驯服烂代码》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具