如何使用 Formik 创建 React 表单

大家好，今天给大家分享一个非常实用的 React 库——formik。formik 是一个用于构建和管理 React 表单的库。它的主要目的是简化表单的开发流程，使得创建和处理表单变得更加容易。

1、什么是 formik，它提供了哪些功能

formik 是一个非常流行的表单库，因为它简单易用，功能强大，而且可以与其他库和框架很好地集成。如果你需要在 React 应用中创建和管理表单，那么使用 formik 可以让你的工作变得更加轻松愉快。

• 简化表单数据的处理：formik 提供了一组简单易用的 API，可以帮助你维护表单数据和状态。
• 校验表单数据：formik 内置了一组强大的校验功能，可以帮助你确保表单数据的正确性。
• 提交表单数据：formik 可以帮助你处理表单提交，并提供了一组方法来让你处理提交过程中的各种情况。

2、formik 的基本使用方法

使用 formik 需要先安装它：

npm install formik

然后在你的代码中引入 formik：

import { Formik } from 'formik';

接下来，你就可以使用 Formik 组件来创建一个表单：

 {
    // 表单提交处理函数
  }}
>
  {(props) => (
    
      {/* 表单字段 */}
      提交
    
  )}

在 Formik 组件内部，你需要编写一个函数来渲染表单。这个函数会接收一个参数，包含了各种用于控制表单的属性和方法。你可以使用这些属性和方法来渲染表单的各个部分。

表单提交时，Formik 组件会调用 onSubmit 属性指定的函数。这个函数会接收两个参数：表单数据对象和表单操作对象。你可以使用这两个参数来处理表单提交，例如将数据发送到服务器。

formik 提供了许多其他的属性和方法来帮助你控制表单的各种状态和功能。例如，你可以使用 handleChange 和 handleBlur 方法来监听表单字段的输入和失焦事件，使用 validateForm 方法来校验表单数据的有效性，使用 setFieldValue 方法来更新表单字段的值，使用 setErrors 方法来设置表单字段的错误信息，使用 isSubmitting 属性来检测表单是否正在提交中，等等。

还有一些其他的重要的属性和方法，例如：

• values：表单数据对象，包含了所有表单字段的值。
• errors：表单字段的错误信息对象。
• touched：表单字段是否已经被访问过的对象。
• handleReset：重置表单的方法。

通过使用这些属性和方法，你可以构建出各种功能强大的表单。

最后，需要注意的是，formik 还提供了一些其他的组件，例如 Form、Field 和 ErrorMessage，可以帮助你更简单地创建表单。你可以参考 formik 文档，了解更多关于这些组件的细节。

3、关于 formik 的高级用法

你可以使用 Formik 创建自定义组件。要创建自定义组件，你需要使用 Formik 的 withFormik 高阶组件。这个高阶组件会给你一个 formik 对象，这个对象包含了 Formik 的所有属性和方法。你可以使用这个对象来像使用受控组件一样使用自定义组件。

例如，你可以使用以下代码创建一个自定义输入组件：

import React from 'react';
import { withFormik, Form, Field } from 'formik';

const CustomInput = ({
  field, // { name, value, onChange, onBlur }
  form: { touched, errors }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.
  ...props
}) => (
  
    
    {touched[field.name] && errors[field.name] && {errors[field.name]}}
  
);

const MyForm = ({
  values,
  errors,
  touched,
  handleChange,
  handleBlur,
  handleSubmit,
  isSubmitting,
}) => (
  
    
    
      Submit
    
  
);

const FormikApp = withFormik({
  mapPropsToValues: () => ({ email: '' }),
  handleSubmit: (values, { setSubmitting }) => {
    setTimeout(() => {
      alert(JSON.stringify(values, null, 2));
      setSubmitting(false);
    }, 1000);
  },
  validationSchema: Yup.object().shape({
    email: Yup.string()
      .email()
      .required('Required'),
  }),
})(MyForm);

export default FormikApp;

在这个例子中，我们使用了 Formik 的 withFormik 高阶组件来创建一个自定义输入组件。我们通过在 Form 组件中使用 Field 组件来使用这个自定义组件。我们还指定了 handleSubmit 函数，这个函数会在表单提交时调用。

Formik 也提供了一些内置的验证方法，你可以使用它们来验证表单数据。例如，你可以使用以下代码来验证表单字段是否为必填项：

import { useFormik } from 'formik';

const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      email: '',
    },
    onSubmit: values => {
      alert(JSON.stringify(values, null, 2));
    },
    validate: values => {
      const errors = {};
      if (!values.email) {
        errors.email = 'Required';
      } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i.test(values.email)) {
        errors.email = 'Invalid email address';
      }
      return errors;
    },
  });
  return (
    
      Email Address
      
      {formik.touched.email && formik.errors.email ? (
        {formik.errors.email}
      ) : null}
      Submit
    
  );
};

此外，Formik 还提供了 setErrors 和 setFieldError 方法，你可以使用它们来在表单提交前设置错误信息。你可以使用以下代码来在表单提交前设置错误信息：

import { useFormik } from 'formik';

const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      email: '',
    },
    onSubmit: values => {
      // 在这里进行表单提交处理
    },
  });
  const validateEmail = email => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (email === 'test@example.com') {
          formik.setFieldError('email', 'Email already in use');
          reject();
        } else {
          resolve();
        }
      }, 1000);
    });
  };
  return (
    
      Email Address
      
      {formik.touched.email && formik.errors.email ? (
        {formik.errors.email}
      ) : null}
       validateEmail(formik.values.email)}>
        Submit
      
    
  );
};

在这个例子中，我们使用了一个异步验证函数 validateEmail 来模拟表单提交前的验证。如果电子邮件地址已被使用，则会设置错误信息。

4、一个登录表单实例

下面我们来通过 Formik 创建简单登录表单的实例，代码如下：

import { Formik, Form, Field, ErrorMessage } from 'formik';

 {
    const errors = {};
    if (!values.email) {
      errors.email = 'Required';
    } else if (
      !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,}$/i.test(values.email)
    ) {
      errors.email = 'Invalid email address';
    }
    return errors;
  }}
  onSubmit={(values, { setSubmitting }) => {
    setTimeout(() => {
      alert(JSON.stringify(values, null, 2));
      setSubmitting(false);
    }, 400);
  }}
>
  {({ isSubmitting }) => (
    
      
      
      
      
      
        Submit
      
    
  )}

在这个例子中，我们创建了一个 Formik 组件，并提供了几个 props：

• initialValues: 表单初始值。
• validate: 验证函数，在表单提交时调用。
• onSubmit: 提交表单时调用的函数。

我们还使用了 Field 组件来创建表单输入，并使用 ErrorMessage 组件来显示错误消息。

当用户提交表单时，Formik 会调用 validate 函数并检查表单值是否有效。如果表单值有效，则会调用 onSubmit 函数并提交表单。

5、总结

最后我们来做下总结，Formik 是一个为 React 应用程序提供表单状态管理的库。它提供了一组简单的、可扩展的组件和一组优秀的工具方法，可以大大简化在 React 应用程序中使用表单的工作。

优点：

• 简化表单开发流程。Formik 封装了很多常见的表单功能，如输入字段验证、提交处理等，使开发者能够专注于实现表单的业务逻辑。
• 减少代码量。Formik 提供了一组简单的组件和方法，使开发者无需编写大量的代码就能实现常见的表单功能。
• 提供丰富的功能。Formik 提供了很多有用的功能，如自定义验证器、自定义提交处理器等，可以满足各种复杂的表单需求。

缺点：

• 对于简单的表单，使用 Formik 可能会带来一些额外的复杂度。
• Formik 依赖于 React 和 Yup（一个用于表单验证的库），如果你的项目中已经使用了其他的表单库或验证库，则可能需要进行一些额外的集成工作。

使用 Formik 的注意事项：

• 请务必熟练掌握 Formik 的使用方法，以便能够充分发挥 Formik 的优势。
• 尽量使用 Formik 组件和方法来实现表单功能，避免手动维护表单状态。 如果你需要在表单中使用自定义组件，请确保这些组件能够与 Formik 的组件和方法配合使用。
• 如果你需要在表单中使用异步验证或提交，请注意使用 Formik 提供的异步方法来实现。
• 使用 Formik 时，请注意遵守 React 的性能优化指南，以便能够最大化应用程序的性能。

关于如何使用 formik 创建 React 表单的介绍就到这里，希望今天的分享能够帮助到你。