学习笔记 - React中的表单组件Formik

以下的部分代码源于官网，下面文字部分并不是对官方文档的翻译，而是我自己的理解和记录。

Source: Pixabay

Formik是一组用于创建表单的React组件。它主要是解决以下几个问题的：

• 从表单组件状态中获取状态
• 表单验证及错误消息
• 表单提交

安装

yarn add formik

基本案例

这是官方提供的一个简单示例：

import React from 'react';
import { useFormik } from 'formik';

export default function SignupForm() {
    const formik = useFormik({
        initialValues: {
            email: '',
        },
        onSubmit: values => {
            alert(JSON.stringify(values, null, 2));
        }
    });
    return (
        <form onSubmit={formik.handleSubmit}>
        <label htmlFor="email">Email Address</label>
        <input
            id="email"
            name="email"
            type="email"
            onChange={formik.handleChange}
            value={formik.values.email}
        />

        <button type="submit">Submit</button>
        </form>
    );
};

在上面的例子中，使用了useFormik钩子。在程序中传递给useFormik两个参数：

* initialValues: 表单中的初始值

* onSubmit: 提交表单时的回调函数

useFormik钩子函数的返回值中包含了：

* handleSubmit: 表单提交时的处理函数，它会调用我们实现的onSubmit函数

* handleChange: 值变更时的处理函数，它会在input,select,textarea等表单字段值变化时被调用

* values: 表单所有字段的当前值，可以通过formik.values.email的方式访问

从上面例子可以看到，我们将表单中的输入字段和props连接到了一起。这样就避免了自己管理所有表单字段以及自定义的事件处理函数。通过useFormik这个钩子把所有的值，及回调函数统一进行管理。

当表单变得更加复杂的时候，原理也是一样的。比如：再添加两个字段：field1, field2的方式也是一样的：

const formik = useFormik({
    initialValues: {
        field1: '',
        field2: '',
        email: '',
    }
});

以及表单部分：

<label htmlFor="field1">field1</label>
<input
    id="field1"
    name="field1"
    type="text"
    onChange={formik.handleChange}
    value={formik.values.field1}
/><br/>

…...

表单验证

在进行表单验证的时候，可以选择HTML原生的验证方法，比如: required, maxlength等等。但这种验证方式又其限制，比如：

• 仅能用于浏览器中，在Reactive Native中不能工作。
• 错误提示都是固定的，无法自定义错误提示信息。

通过Formik，可以管理验证规则及自定义的错误提示信息。首先定义验证规则：

const validate = values => {
    const errors = {};
    if (!values.field1) {
      errors.field1 = 'Required';
    } else if (values.field1.length > 15) {
      errors.field1 = 'Must be 15 characters or less';
    }
  
    //…...
  
    return errors;
};

可以看到，在上面可以灵活的定义各种验证规则，比如：field1非空，同时必须小于15个字符串。接下来需要将validate传递给useFormik：

const formik = useFormik({
    //…...
    validate,
    // …..
});

同时，在React组件中输入项的相关位置，添加错误提示信息：

{formik.errors.field1 ? <div>{formik.errors.field1}</div> : null}