如何使用 Formik 创建 React 表单
创始人
2025-07-07 10:31:16
0

大家好,今天给大家分享一个非常实用的 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, }) => (
); 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 (
    
{formik.touched.email && formik.errors.email ? (
{formik.errors.email}
) : null}
); };

此外,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 (
    
{formik.touched.email && formik.errors.email ? (
{formik.errors.email}
) : null}
); };

在这个例子中,我们使用了一个异步验证函数 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 }) => (
    
)}

在这个例子中,我们创建了一个 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 表单的介绍就到这里,希望今天的分享能够帮助到你。

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...
2012年第四季度互联网状况报... [[71653]]  北京时间4月25日消息,据国外媒体报道,全球知名的云平台公司Akamai Te...