Formik Docs - 简介

Formik 是一个用于构建 React 表单的强大和直观的库。它简化了表单处理的复杂性，通过提供强大的表单状态管理和验证功能，减少了开发人员的工作量和犯错的机会。

特点

• 简化的表单状态管理器
• 泛用性强的表单验证器
• 支持表单输入时实时验证
• 支持处理表单提交
• 对复杂表单和表单逻辑的良好支持
• 支持自定义表单字段组件

安装

你可以通过 npm 或者 yarn 来安装 Formik：

npm install formik

# 或者

yarn add formik

使用示例

下面是一个简单的示例，展示了如何使用 Formik 来创建一个简单的登录表单。

首先，导入所需的库和组件：

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

然后，创建一个验证函数来验证表单输入：

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

  if (!values.username) {
    errors.username = '用户名是必填项';
  }

  if (!values.password) {
    errors.password = '密码是必填项';
  }

  return errors;
};

最后，在组件中使用 Formik 组件包含表单，并添加相应的 Field 组件来生成表单字段：

const LoginForm = () => (
  <Formik
    initialValues={{ username: '', password: '' }}
    validate={validate}
    onSubmit={(values) => {
      // 处理表单提交逻辑
      console.log(values);
    }}
  >
    <Form>
      <div>
        <label htmlFor="username">用户名</label>
        <Field type="text" id="username" name="username" />
        <ErrorMessage name="username" component="div" className="error" />
      </div>

      <div>
        <label htmlFor="password">密码</label>
        <Field type="password" id="password" name="password" />
        <ErrorMessage name="password" component="div" className="error" />
      </div>

      <button type="submit">登录</button>
    </Form>
  </Formik>
);

export default LoginForm;

这是一个简单的登录表单示例，但你可以根据你的需求扩展它，Formik 提供了很多功能和选项。

你可以在 Formik 文档 中了解更多信息，包括更高级的用法、自定义字段等等。