首页手记 Formik教程：初学者必备指南

Formik教程：初学者必备指南

标签：

JavaScript React.JS Vue.js

概述

Formik是一个用于React应用程序的可重用库，旨在简化表单处理和状态管理。本文将详细介绍Formik教程，包括安装、基本使用、验证与错误处理等关键内容。此外，还将探讨Formik的高级用法，如动态更新表单数据和条件渲染。通过本教程，你将全面掌握Formik的各项功能。

Formik教程：初学者必备指南

Formik简介

Formik 是一个用于 React 应用程序的可重用库，旨在简化表单处理和状态管理。它可以帮助开发者更方便地处理表单数据，处理表单验证，提供统一的错误处理机制等。Formik 通过使用高阶组件（Higher Order Component，HOC）和 hook 方式，提供了强大的功能，使得表单处理更加便捷和优雅。

Formik 通常与 React Hook Form 和 Yup 一起使用，来提供强大的表单验证和错误处理功能。Yup 是一个用于 JavaScript 的数据验证库，而 React Hook Form 则是一个用于处理表单数据和验证的库。它们可以与 Formik 结合使用，提供更强大的表单处理功能。

Formik 核心概念

Formik 组件：Formik 的主要组件，用于包裹表单元素和逻辑。
Form 组件：Formik 提供的表单组件，用于渲染表单。
Field 组件：用于渲染表单输入元素。
withFormik HOC：用于将 Formik 的状态和行为注入到自定义组件中。
useFormik hook：用于在函数组件中使用 Formik 的状态和行为。

Formik安装与基本使用

要开始使用 Formik，首先需要安装它。可以通过 npm 或 yarn 来安装 Formik：

npm install formik

或者

yarn add formik

安装完成后，可以开始使用它。以下是一个简单的示例，展示了如何创建一个基本的表单：

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

function BasicForm() {
  return (
    <Formik
      initialValues={{ email: '', password: '' }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 1000);
      }}
    >
      <Form>
        <Field type="email" name="email" />
        <ErrorMessage name="email" component="div" />
        <Field type="password" name="password" />
        <ErrorMessage name="password" component="div" />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
}

export default BasicForm;

解析代码

Formik 组件接收几个关键属性：
- initialValues：定义初始表单状态。
- onSubmit：定义表单提交时的回调函数。
- onReset：定义表单重置时的回调函数。
Form 组件：用于渲染表单，包含所有表单元素。
Field 组件：用于渲染单个表单元素，如输入框。
ErrorMessage 组件：用于显示表单输入的验证错误信息。

示例代码

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

function BasicForm() {
  return (
    <Formik
      initialValues={{ email: '', password: '' }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 1000);
      }}
    >
      <Form>
        <Field type="email" name="email" />
        <ErrorMessage name="email" component="div" />
        <Field type="password" name="password" />
        <ErrorMessage name="password" component="div" />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
}

export default BasicForm;

Formik与React表单结合使用

Formik 与 React 表单元素结合使用非常方便，你可以直接在 Field 组件中嵌入各种 React 表单元素，如 input, textarea, select 等。以下是一个示例，展示了如何在表单中使用 input, textarea 和 select：

使用 `input` 和 `textarea` 的示例

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

function FormikForm() {
  return (
    <Formik
      initialValues={{ name: '', summary: '', status: 'ok' }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 1000);
      }}
    >
      <Form>
        <Field type="text" name="name" placeholder="Name" />
        <ErrorMessage name="name" component="div" />
        <Field as="textarea" name="summary" placeholder="Summary" />
        <ErrorMessage name="summary" component="div" />
        <Field type="submit" value="Submit" />
      </Form>
    </Formik>
  );
}

export default FormikForm;

使用 `select` 的示例

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

function SelectForm() {
  return (
    <Formik
      initialValues={{ status: 'ok' }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 1000);
      }}
    >
      <Form>
        <Field name="status">
          {({ field, form }) => (
            <select {...field}>
              <option value="ok">Ok</option>
              <option value="not ok">Not ok</option>
            </select>
          )}
        </Field>
        <Field type="submit" value="Submit" />
      </Form>
    </Formik>
  );
}

export default SelectForm;

解析代码

Field 组件可以直接渲染 React 表单元素，如 input, textarea, select。
可以通过 field 以及 form 来访问当前字段的值和表单状态。
ErrorMessage 组件用于显示表单元素的验证错误信息。

示例代码

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

function SelectForm() {
  return (
    <Formik
      initialValues={{ status: 'ok' }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 1000);
      }}
    >
      <Form>
        <Field name="status">
          {({ field, form }) => (
            <select {...field}>
              <option value="ok">Ok</option>
              <option value="not ok">Not ok</option>
            </select>
          )}
        </Field>
        <Field type="submit" value="Submit" />
      </Form>
    </Formik>
  );
}

export default SelectForm;

Formik验证与错误处理

Formik 提供了强大的验证功能，通过与 Yup 一起使用，可以实现复杂的表单验证逻辑。以下是一个示例，展示了如何使用 Yup 进行表单验证：

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  name: Yup.string()
    .required('Name is required')
    .min(2, 'Must be 2 characters or more'),
  email: Yup.string()
    .email('Invalid email address')
    .required('Email is required'),
});

function ValidationForm() {
  return (
    <Formik
      initialValues={{ name: '', email: '' }}
      validationSchema={validationSchema}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 1000);
      }}
    >
      <Form>
        <Field name="name" placeholder="Name" />
        <ErrorMessage name="name" component="div" />
        <Field type="email" name="email" placeholder="Email" />
        <ErrorMessage name="email" component="div" />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
}

export default ValidationForm;

解析代码

validationSchema：定义了表单字段的验证规则。
Yup.string()：用于验证字符串类型的数据。
required：定义字段是否必填。
min：定义字符串的最小长度。
email：验证是否为有效的电子邮件地址。

示例代码

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  name: Yup.string()
    .required('Name is required')
    .min(2, 'Must be 2 characters or more'),
  email: Yup.string()
    .email('Invalid email address')
    .required('Email is required'),
});

function ValidationForm() {
  return (
    <Formik
      initialValues={{ name: '', email: '' }}
      validationSchema={validationSchema}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 1000);
      }}
    >
      <Form>
        <Field name="name" placeholder="Name" />
        <ErrorMessage name="name" component="div" />
        <Field type="email" name="email" placeholder="Email" />
        <ErrorMessage name="email" component="div" />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
}

export default ValidationForm;

Formik高级用法

Formik 提供了多种高级功能，如自定义验证函数、动态更新表单数据、使用 Formik Context 等。以下是一些高级用法的示例：

自定义验证函数

Formik 允许你编写自定义验证函数，并使用 validate 属性来调用它们。以下是一个示例，展示了如何使用自定义验证函数：

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

function CustomValidation() {
  const validate = (values) => {
    const errors = {};
    if (!values.name) {
      errors.name = 'Name is required';
    }
    if (!values.email) {
      errors.email = 'Email is 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
      initialValues={{ name: '', email: '' }}
      validate={validate}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 1000);
      }}
    >
      <Form>
        <Field name="name" placeholder="Name" />
        <ErrorMessage name="name" component="div" />
        <Field type="email" name="email" placeholder="Email" />
        <ErrorMessage name="email" component="div" />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
}

export default CustomValidation;

解析代码

validate 函数接收当前表单值，并返回一个包含错误信息的对象。
如果某个字段的值不符合条件，则在错误对象中添加相应的错误信息。

动态更新表单数据

Formik 允许你动态更新表单数据，例如在表单提交后。可以通过 useFormik hook 来访问表单状态和更新数据。

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

function DynamicUpdate() {
  const formik = useFormik({
    initialValues: { name: '', email: '' },
    onSubmit: (values, { setSubmitting }) => {
      setTimeout(() => {
        alert(JSON.stringify(values, null, 2));
        setSubmitting(false);
      }, 1000);
    },
  });

  const handleReset = () => {
    formik.setValues({ name: '', email: '' });
  };

  return (
    <form onSubmit={formik.handleSubmit}>
      <Field name="name" placeholder="Name" />
      <ErrorMessage name="name" component="div" />
      <Field type="email" name="email" placeholder="Email" />
      <ErrorMessage name="email" component="div" />
      <button type="submit">Submit</button>
      <button type="button" onClick={handleReset}>
        Reset
      </button>
    </form>
  );
}

export default DynamicUpdate;

解析代码

useFormik hook 可以获取表单状态和更新数据的函数。
setValues 方法用于设置表单的初始值。
handleSubmit 方法用于提交表单。

使用 Formik Context

Formik 允许你通过 Formik Context 访问表单的状态和方法。以下是一个示例，展示了如何使用 Formik Context：

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

function WithFormikContext() {
  return (
    <Formik
      initialValues={{ name: '', email: '' }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 1000);
      }}
    >
      {({ values, handleChange, handleReset }) => (
        <form onSubmit={handleChange}>
          <Field name="name" placeholder="Name" />
          <ErrorMessage name="name" component="div" />
          <Field type="email" name="email" placeholder="Email" />
          <ErrorMessage name="email" component="div" />
          <button type="submit">Submit</button>
          <button type="button" onClick={handleReset}>
            Reset
          </button>
        </form>
      )}
    </Formik>
  );
}

export default WithFormikContext;

解析代码

Formik 组件接收一个函数，该函数会传入一个对象，包含表单的状态和方法。
values：包含当前表单值的对象。
handleChange：处理表单变化的方法。
handleReset：处理表单重置的方法。

示例代码

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

function WithFormikContext() {
  return (
    <Formik
      initialValues={{ name: '', email: '' }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 1000);
      }}
    >
      {({ values, handleChange, handleReset }) => (
        <form onSubmit={handleChange}>
          <Field name="name" placeholder="Name" />
          <ErrorMessage name="name" component="div" />
          <Field type="email" name="email" placeholder="Email" />
          <ErrorMessage name="email" component="div" />
          <button type="submit">Submit</button>
          <button type="button" onClick={handleReset}>
            Reset
          </button>
        </form>
      )}
    </Formik>
  );
}

export default WithFormikContext;

Formik常见问题解答

Q1: Formik 是否支持动态表单字段？

是的，Formik 支持动态表单字段。你可以使用 Field 组件的 name 属性来动态设置字段名称，从而实现动态表单字段。

示例代码

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

function DynamicFields() {
  const fields = [
    { name: 'name', type: 'text', label: 'Name' },
    { name: 'email', type: 'email', label: 'Email' },
  ];

  return (
    <Formik
      initialValues={{ name: '', email: '' }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 1000);
      }}
    >
      <Form>
        {fields.map((field) => (
          <Field key={field.name} type={field.type} name={field.name} />
        ))}
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
}

export default DynamicFields;

Q2: 如何处理表单提交失败的情况？

在 onSubmit 回调函数中，可以添加逻辑来处理表单提交失败的情况。例如，可以使用 setSubmitting 方法来处理加载状态。

示例代码

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

function HandleSubmitFailure() {
  return (
    <Formik
      initialValues={{ email: '' }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          try {
            // Simulate an error
            throw new Error('Network error');
          } catch (error) {
            alert('Error: ' + error.message);
            setSubmitting(false);
          }
        }, 1000);
      }}
    >
      <Form>
        <Field type="email" name="email" placeholder="Email" />
        <ErrorMessage name="email" component="div" />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
}

export default HandleSubmitFailure;

Q3: 如何使用 Formik 与 Redux 结合？

Formik 可以与 Redux 结合使用，以管理表单状态。你可以在 Formik 中使用 useFormik hook 并结合 Redux 使用 useDispatch 和 useSelector 来管理表单数据。

示例代码

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useFormik } from 'formik';

function FormikWithRedux() {
  const dispatch = useDispatch();
  const formState = useSelector((state) => state.form);

  const formik = useFormik({
    initialValues: formState,
    onSubmit: (values) => {
      // Dispatch an action to update the form state
      dispatch({ type: 'UPDATE_FORM', payload: values });
    },
  });

  return (
    <Formik
      initialValues={formik.initialValues}
      onSubmit={formik.handleSubmit}
    >
      {() => (
        <form onSubmit={formik.handleSubmit}>
          <Field type="email" name="email" placeholder="Email" />
          <ErrorMessage name="email" component="div" />
          <button type="submit">Submit</button>
        </form>
      )}
    </Formik>
  );
}

export default FormikWithRedux;

Q4: 如何在 Formik 中处理文件上传？

Formik 本身不直接支持文件上传，但你可以通过在表单中使用 input 元素，并在 onSubmit 回调中处理文件上传逻辑。以下是一个示例，展示了如何在 Formik 中处理文件上传：

示例代码

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

function FileUploadForm() {
  const handleFileSubmit = (values, { setSubmitting }) => {
    const formData = new FormData();
    formData.append('file', values.file[0]);
    setTimeout(() => {
      alert('File uploaded successfully');
      setSubmitting(false);
    }, 1000);
  };

  return (
    <Formik
      initialValues={{ file: [] }}
      onSubmit={handleFileSubmit}
    >
      <Form>
        <Field type="file" name="file" />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
}

export default FileUploadForm;

Q5: 如何在 Formik 中处理多个表单？

Formik 支持在一个页面中处理多个表单。你可以为每个表单创建独立的 Formik 组件，并使用不同的 initialValues 和 onSubmit 回调来区分它们。

示例代码

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

function MultipleForms() {
  return (
    <>
      <Formik
        initialValues={{ name: '' }}
        onSubmit={(values, { setSubmitting }) => {
          setTimeout(() => {
            alert('Name Submitted');
            setSubmitting(false);
          }, 1000);
        }}
      >
        <Form>
          <Field name="name" placeholder="Name" />
          <ErrorMessage name="name" component="div" />
          <button type="submit">Submit</button>
        </Form>
      </Formik>
      <Formik
        initialValues={{ email: '' }}
        onSubmit={(values, { setSubmitting }) => {
          setTimeout(() => {
            alert('Email Submitted');
            setSubmitting(false);
          }, 1000);
        }}
      >
        <Form>
          <Field type="email" name="email" placeholder="Email" />
          <ErrorMessage name="email" component="div" />
          <button type="submit">Submit</button>
        </Form>
      </Formik>
    </>
  );
}

export default MultipleForms;

Q6: 如何在 Formik 中实现条件渲染？

Formik 支持在表单中实现条件渲染。你可以使用 React 的条件渲染逻辑来根据某些条件显示或隐藏表单字段。

示例代码

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

function ConditionalRendering() {
  return (
    <Formik
      initialValues={{ displayDetails: false, name: '' }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 1000);
      }}
    >
      {({ values, handleChange }) => (
        <Form>
          <Field type="checkbox" name="displayDetails" value={values.displayDetails} onChange={handleChange} />
          {values.displayDetails && (
            <>
              <Field name="name" placeholder="Name" />
              <ErrorMessage name="name" component="div" />
            </>
          )}
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  );
}

export default ConditionalRendering;

通过以上示例和代码，你可以更好地理解和使用 Formik 在 React 应用程序中的功能。无论是简单的表单处理，复杂的验证规则，还是动态表单字段，Formik 都能提供强大的支持。希望本文对你有所帮助，更多高级功能和用法请参考官方文档。

参考资料

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕标琳琳

手记
篇

粉丝

18

获赞与收藏

140

关注作者，订阅最新文章

相关文章推荐

2023 年 7 个适合初学者的 Vue.js 教程

Joomla别名的初学者指南

Java工程师学习指南（初级篇）

Java工程师学习指南（初级篇）

Java工程师学习指南初级篇

阅读免费教程

JavaScript 入门教程

80个小节 311146 2192

后端通用面试教程

41个小节 30273 342

网络编程入门教程

20个小节 12461 235

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Formik教程：初学者必备指南

Formik 核心概念

解析代码

示例代码

使用 input 和 textarea 的示例

使用 select 的示例

解析代码

示例代码

解析代码

示例代码

自定义验证函数

解析代码

动态更新表单数据

解析代码

使用 Formik Context

解析代码

示例代码

Q1: Formik 是否支持动态表单字段？

示例代码

Q2: 如何处理表单提交失败的情况？

示例代码

Q3: 如何使用 Formik 与 Redux 结合？

示例代码

Q4: 如何在 Formik 中处理文件上传？

示例代码

Q5: 如何在 Formik 中处理多个表单？

示例代码

Q6: 如何在 Formik 中实现条件渲染？

示例代码

参考资料

相关文章推荐

阅读免费教程

使用 `input` 和 `textarea` 的示例

使用 `select` 的示例