如何使用 Formik 创建 React 表单

Xdt28资讯网——每日最新资讯28at.com

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

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

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

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

2、formik 的基本使用方法

使用 formik 需要先安装它：Xdt28资讯网——每日最新资讯28at.com

npm install formik

然后在你的代码中引入 formik：Xdt28资讯网——每日最新资讯28at.com

import { Formik } from 'formik';

接下来，你就可以使用 Formik 组件来创建一个表单：Xdt28资讯网——每日最新资讯28at.com

<Formik  initialValues={{    name: '',    email: '',  }}  onSubmit={(values, actions) => {    // 表单提交处理函数  }}>  {(props) => (    <form onSubmit={props.handleSubmit}>      {/* 表单字段 */}      <button type="submit">提交</button>    </form>  )}</Formik>

在 Formik 组件内部，你需要编写一个函数来渲染表单。这个函数会接收一个参数，包含了各种用于控制表单的属性和方法。你可以使用这些属性和方法来渲染表单的各个部分。Xdt28资讯网——每日最新资讯28at.com

表单提交时，Formik 组件会调用 onSubmit 属性指定的函数。这个函数会接收两个参数：表单数据对象和表单操作对象。你可以使用这两个参数来处理表单提交，例如将数据发送到服务器。Xdt28资讯网——每日最新资讯28at.com

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

还有一些其他的重要的属性和方法，例如：Xdt28资讯网——每日最新资讯28at.com

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

通过使用这些属性和方法，你可以构建出各种功能强大的表单。Xdt28资讯网——每日最新资讯28at.com

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

3、关于 formik 的高级用法

你可以使用 Formik 创建自定义组件。要创建自定义组件，你需要使用 Formik 的 withFormik 高阶组件。这个高阶组件会给你一个 formik 对象，这个对象包含了 Formik 的所有属性和方法。你可以使用这个对象来像使用受控组件一样使用自定义组件。Xdt28资讯网——每日最新资讯28at.com

例如，你可以使用以下代码创建一个自定义输入组件：Xdt28资讯网——每日最新资讯28at.com

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}) => (  <div>    <input type="text" {...field} {...props} />    {touched[field.name] && errors[field.name] && <div className="error">{errors[field.name]}</div>}  </div>);const MyForm = ({  values,  errors,  touched,  handleChange,  handleBlur,  handleSubmit,  isSubmitting,}) => (  <Form>    <Field type="text" name="email" component={CustomInput} />    <button type="submit" disabled={isSubmitting}>      Submit    </button>  </Form>);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 函数，这个函数会在表单提交时调用。Xdt28资讯网——每日最新资讯28at.com

Formik 也提供了一些内置的验证方法，你可以使用它们来验证表单数据。例如，你可以使用以下代码来验证表单字段是否为必填项：Xdt28资讯网——每日最新资讯28at.com

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 (    <form onSubmit={formik.handleSubmit}>      <label htmlFor="email">Email Address</label>      <input        id="email"        name="email"        type="email"        onChange={formik.handleChange}        onBlur={formik.handleBlur}        value={formik.values.email}      />      {formik.touched.email && formik.errors.email ? (        <div>{formik.errors.email}</div>      ) : null}      <button type="submit">Submit</button>    </form>  );};

此外，Formik 还提供了 setErrors 和 setFieldError 方法，你可以使用它们来在表单提交前设置错误信息。你可以使用以下代码来在表单提交前设置错误信息：Xdt28资讯网——每日最新资讯28at.com

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 (    <form onSubmit={formik.handleSubmit}>      <label htmlFor="email">Email Address</label>      <input        id="email"        name="email"        type="email"        onChange={formik.handleChange}        onBlur={formik.handleBlur}        value={formik.values.email}      />      {formik.touched.email && formik.errors.email ? (        <div>{formik.errors.email}</div>      ) : null}      <button type="submit" onClick={() => validateEmail(formik.values.email)}>        Submit      </button>    </form>  );};

在这个例子中，我们使用了一个异步验证函数 validateEmail 来模拟表单提交前的验证。如果电子邮件地址已被使用，则会设置错误信息。Xdt28资讯网——每日最新资讯28at.com

4、一个登录表单实例

下面我们来通过 Formik 创建简单登录表单的实例，代码如下：Xdt28资讯网——每日最新资讯28at.com

import { Formik, Form, Field, ErrorMessage } from 'formik';<Formik  initialValues={{ email: '', password: '' }}  validate={values => {    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 }) => (    <Form>      <Field type="email" name="email" />      <ErrorMessage name="email" component="div" />      <Field type="password" name="password" />      <ErrorMessage name="password" component="div" />      <button type="submit" disabled={isSubmitting}>        Submit      </button>    </Form>  )}</Formik>

在这个例子中，我们创建了一个 Formik 组件，并提供了几个 props：Xdt28资讯网——每日最新资讯28at.com

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

我们还使用了 Field 组件来创建表单输入，并使用 ErrorMessage 组件来显示错误消息。Xdt28资讯网——每日最新资讯28at.com

当用户提交表单时，Formik 会调用 validate 函数并检查表单值是否有效。如果表单值有效，则会调用 onSubmit 函数并提交表单。Xdt28资讯网——每日最新资讯28at.com

5、总结

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

优点：Xdt28资讯网——每日最新资讯28at.com

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

缺点：Xdt28资讯网——每日最新资讯28at.com

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

使用 Formik 的注意事项：Xdt28资讯网——每日最新资讯28at.com

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

关于如何使用 formik 创建 React 表单的介绍就到这里，希望今天的分享能够帮助到你。Xdt28资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-34647-0.html如何使用 Formik 创建 React 表单

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： 通过Spring AOP结合SpEL表达式：构建强大且灵活的权限控制体系

下一篇： 面试官：抛开Spring来说，如何自己实现Spring AOP?