用于打字稿的 useFormik 类型

简介

useFormik 是一个 React Hook，它提供了一个方便的方式来处理表单逻辑和表单校验。使用 useFormik，可以轻松地创建一个包含表单控件的表单，并在表单提交时执行自定义处理逻辑。

安装

使用 npm 安装 formik：

npm install formik --save

或使用 yarn 安装 formik：

yarn add formik

使用

要使用 useFormik，需要将表单的初始值和提交处理程序传递给 useFormik。以下是一个使用 useFormik 创建表单的示例：

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

const initialValues = {
  firstName: '',
  lastName: '',
  email: '',
};

const onSubmit = (values) => {
  console.log(values);
};

const MyForm = () => {
  const formik = useFormik({
    initialValues,
    onSubmit,
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <input
        type="text"
        name="firstName"
        value={formik.values.firstName}
        onChange={formik.handleChange}
      />
      <input
        type="text"
        name="lastName"
        value={formik.values.lastName}
        onChange={formik.handleChange}
      />
      <input
        type="email"
        name="email"
        value={formik.values.email}
        onChange={formik.handleChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

在上面的示例中，表单将从 initialValues 对象中获取初始值。当表单提交时，onSubmit 函数将被调用，并将表单的值作为参数传递。要访问表单的值，可以使用 formik.values 对象。要在输入发生更改时更新表单的值，请使用 formik.handleChange 处理程序。

表单校验

useFormik 还提供了一种方便的方式来执行表单校验。要添加表单校验，可以将一个 validate 函数传递给 useFormik，该函数将在表单提交时执行。以下是一个将 validate 函数添加到上面示例中的示例：

const validate = (values) => {
  const errors = {};

  if (!values.firstName) {
    errors.firstName = 'Required';
  }

  if (!values.lastName) {
    errors.lastName = 'Required';
  }

  if (!values.email) {
    errors.email = 'Required';
  }

  return errors;
};

const MyForm = () => {
  const formik = useFormik({
    initialValues,
    onSubmit,
    validate,
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <input
        type="text"
        name="firstName"
        value={formik.values.firstName}
        onChange={formik.handleChange}
      />
      {formik.errors.firstName && <div>{formik.errors.firstName}</div>}
      <input
        type="text"
        name="lastName"
        value={formik.values.lastName}
        onChange={formik.handleChange}
      />
      {formik.errors.lastName && <div>{formik.errors.lastName}</div>}
      <input
        type="email"
        name="email"
        value={formik.values.email}
        onChange={formik.handleChange}
      />
      {formik.errors.email && <div>{formik.errors.email}</div>}
      <button type="submit">Submit</button>
    </form>
  );
};

在上面的示例中，validate 函数将在表单提交时执行。如果表单的值不符合要求，validate 函数应该返回一个包含错误信息的对象，并使用 formik.errors 对象在表单控件下方渲染错误信息。