Formik学习：新手入门指南-原创手记-慕课网

概述

本文详细介绍了Formik学习过程，包括Formik的安装、基本使用方法、表单验证以及与React Hook Form的结合使用。文章还探讨了Formik的高级用法，如高阶组件和自定义Hook的使用，并提供了常见问题及解决方法。

引入Formik

Formik是一个用于React的库，它简化了表单的处理，包括表单的构建、验证、提交等。Formik提供了一种更高效、更易维护的方式来处理表单，使得开发者能够专注于业务逻辑的实现，而不需要过多地担心表单的状态管理。它通过提供一个简单的方式来处理React中的表单状态，使得构建复杂的表单变得更简单。

安装Formik及其依赖库

在项目中引入Formik需要先安装必要的依赖，首先确保项目中有npm或yarn，然后可以通过以下命令安装Formik及其依赖库yup（用于表单验证）：

npm install formik yup

或者使用yarn：

yarn add formik yup

安装完成后，你可以在项目中开始使用Formik了。

Formik的基本使用

创建Formik表单

在React应用中使用Formik创建表单，首先需要从Formik中导入Formik组件和Form、Field等。接着，你就可以创建一个基本的表单。

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

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

export default App;

这个示例中，Formik接收两个主要属性：initialValues和onSubmit。initialValues用于设置初始表单字段的值，onSubmit是一个回调函数，当表单提交时被调用。在这个例子中，表单提交后会弹出一个警告，显示表单的数据。

使用Formik提供的属性和方法

Formik提供了丰富的属性和方法来处理表单状态。例如，Formik组件提供了一个isSubmitting属性，表示表单是否正在提交，以及setSubmitting方法，可以用来控制表单的提交状态。此外，Field组件也有一个value属性，表示字段的当前值。

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

function App() {
  return (
    <Formik
      initialValues={{ name: '' }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 1000);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <Field type="text" name="name" placeholder="Name" />
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  );
}

export default App;

在这个示例中，isSubmitting被用来禁用提交按钮，直到表单提交完成。

Formik与表单验证

如何编写表单验证规则

使用Formik和yup，你可以很容易地为表单添加验证规则。yup提供了丰富的API来定义验证规则。例如，下面是一个基本的验证规则示例：

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

const validationSchema = Yup.object().shape({
  name: Yup.string()
    .required('Name is required')
    .min(3, 'Name must be at least 3 characters')
    .max(50, 'Name must not exceed 50 characters'),
});

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

export default App;

在上面的示例中，validationSchema定义了一个验证对象，其中名称字段需要满足required、min和max的条件。如果验证失败，Formik会自动显示错误信息。

使用Formik来显示验证错误信息

Formik提供了<Field>组件和<ErrorMessage>组件来显示验证错误。<ErrorMessage>组件会显示与字段名相对应的错误信息。

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(3, 'Name must be at least 3 characters')
    .max(50, 'Name must not exceed 50 characters'),
});

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

export default App;

在这个示例中，<ErrorMessage>组件会显示字段名称的错误信息。errors和touched对象由Formik提供，分别包含验证错误和字段是否被触碰的状态。

Formik与React Hook Form的结合

为什么选择结合使用

虽然Formik和React Hook Form都提供了处理表单的功能，但结合使用它们可以更灵活地处理复杂的表单需求。Formik提供了强大的表单状态管理和验证功能，而React Hook Form则提供了更细粒度的控件和更简单的API。结合使用它们可以在复杂表单的构建中提供更灵活的解决方案。

如何结合使用两者

尽管Formik和React Hook Form都是用于处理表单的库，但它们的实现方式和API有所不同。如果你想结合使用两者，可以先用Formik处理表单的状态和验证，然后用React Hook Form的useForm钩子来添加更细粒度的控件。例如，你可以用Formik处理表单提交，用React Hook Form处理每个字段的独立验证。

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import { Controller, useForm } from 'react-hook-form';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  name: Yup.string()
    .required('Name is required')
    .min(3, 'Name must be at least 3 characters')
    .max(50, 'Name must not exceed 50 characters'),
});

function App() {
  const { control, handleSubmit, formState } = useForm({
    mode: 'onChange',
    defaultValues: { name: '' },
  });

  return (
    <Formik
      initialValues={{ name: '' }}
      validationSchema={validationSchema}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 1000);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <Controller
            name="name"
            control={control}
            rules={{
              required: 'Name is required',
              minLength: { value: 3, message: 'Name must be at least 3 characters' },
              maxLength: { value: 50, message: 'Name must not exceed 50 characters' },
            }}
            render={({ field }) => (
              <div>
                <input {...field} placeholder="Name" />
                {formState.errors.name && formState.touched.name ? (
                  <p>{formState.errors.name}</p>
                ) : null}
              </div>
            )}
          />
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  );
}

export default App;

在这个示例中，useForm钩子用于处理每个字段的验证，而Formik用于处理表单的整体状态和提交逻辑。Controller组件用于将React Hook Form的逻辑集成到Formik中。

Formik的进阶用法

使用Formik的高阶组件和自定义Hook

Formik提供了多个高阶组件和自定义钩子，这些组件和钩子可以进一步简化表单的处理。例如，useFormik钩子可以用于在函数组件中使用Formik的逻辑。此外，FormikProvider可以用于在组件树中提供Formik的上下文。

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

const validationSchema = Yup.object().shape({
  name: Yup.string()
    .required('Name is required')
    .min(3, 'Name must be at least 3 characters')
    .max(50, 'Name must not exceed 50 characters'),
});

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

  return (
    <Formik
      initialValues={{ name: formik.initialValues }}
      validationSchema={formik.validationSchema}
      onSubmit={(values, { setSubmitting }) => {
        formik.handleSubmit(values, { setSubmitting });
      }}
    >
      {() => (
        <Form>
          <Field type="text" name="name" placeholder="Name" />
          <ErrorMessage name="name" />
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  );
}

export default App;

在这个示例中，useFormik钩子用于在函数组件中初始化Formik的状态和逻辑。FormikProvider用于在组件树中提供Formik的上下文，使得子组件可以访问Formik的状态和方法。

理解Formik的内部工作原理

Formik的核心工作原理是管理表单的状态和生命周期。它通过Formik组件来处理表单的初始化、验证、提交等逻辑。Formik组件提供了一系列的属性和方法，用于控制表单的状态和行为。

例如，Formik组件的initialValues属性用于设置初始表单状态。Formik组件的onSubmit属性用于定义表单提交时的回调函数。Formik组件还提供了一组方法，用于控制表单的状态，例如setFieldValue用于设置字段的值，setFormikState用于设置整个表单的状态。

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(3, 'Name must be at least 3 characters')
    .max(50, 'Name must not exceed 50 characters'),
});

function App() {
  return (
    <Formik
      initialValues={{ name: '' }}
      validationSchema={validationSchema}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 1000);
      }}
    >
      {({ setFieldValue, isSubmitting }) => (
        <Form>
          <Field type="text" name="name" placeholder="Name" />
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  );
}

export default App;

在这个示例中，setFieldValue方法用于动态设置字段的值。isSubmitting属性用于获取表单的提交状态。

常见问题及解决方法

常见错误和调试技巧

在使用Formik时，常见的错误包括表单验证错误、表单提交失败等。要解决这些错误，可以检查以下几点：

确保initialValues和onSubmit属性正确设置。
验证validationSchema是否正确定义。
检查Field组件是否正确使用。

调试时，可以使用浏览器的开发者工具来检查表单的提交数据和验证错误信息。Formik组件提供了isSubmitting和errors等属性，可以帮助你了解表单的状态和错误信息。

社区资源和官方文档推荐

Formik的官方文档提供了详细的指南和示例，可以帮助你更好地理解和使用Formik。此外，Formik的GitHub仓库和Stack Overflow上有很多用户提供的问题和解决方案，可以帮助你解决遇到的问题。

官方文档：https://formik.org/docs/guides/validation
GitHub仓库：https://github.com/jaredpalmer/formik
Stack Overflow：https://stackoverflow.com/questions/tagged/formik