Formik在分离成组件后显示验证错误消息

Formik是一个用于构建表单的React库。它提供了一种简化和优化表单处理的方式，包括表单验证、表单状态管理和表单提交等功能。

在将Formik分离成组件后，可以通过使用Formik的验证功能来显示验证错误消息。以下是一种可能的实现方式：

首先，确保已安装Formik库。可以使用以下命令进行安装：

npm install formik

在需要使用Formik的组件中，导入Formik和相关的验证函数：

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

创建一个验证模式（validation schema），用于定义表单字段的验证规则。例如，可以使用Yup库来创建验证模式：

const validationSchema = Yup.object().shape({
  username: Yup.string().required('用户名不能为空'),
  password: Yup.string().required('密码不能为空'),
});

在组件的render方法中，使用Formik组件包裹表单，并传递验证模式和表单提交处理函数：

<Formik
  initialValues={{ username: '', password: '' }}
  validationSchema={validationSchema}
  onSubmit={(values, { setSubmitting }) => {
    // 处理表单提交逻辑
    console.log(values);
    setSubmitting(false);
  }}
>
  {({ isSubmitting }) => (
    <form>
      <div>
        <label htmlFor="username">用户名</label>
        <Field type="text" name="username" />
        <ErrorMessage name="username" component="div" />
      </div>
      <div>
        <label htmlFor="password">密码</label>
        <Field type="password" name="password" />
        <ErrorMessage name="password" component="div" />
      </div>
      <button type="submit" disabled={isSubmitting}>
        提交
      </button>
    </form>
  )}
</Formik>

在上述代码中，initialValues定义了表单字段的初始值，validationSchema定义了验证规则，onSubmit定义了表单提交处理函数。Field组件用于渲染表单字段，ErrorMessage组件用于显示验证错误消息。