formik + yup并验证子react组件中的字段

// 父组件
import React from 'react';
import { Formik, Field } from 'formik';
import * as Yup from 'yup';

// 使用yup定义字段的验证规则
const validationSchema = Yup.object().shape({
  username: Yup.string().required('用户名不能为空'),
  password: Yup.string().required('密码不能为空'),
});

const ParentComponent = () => {
  const handleSubmit = (values) => {
    // 处理表单提交
    console.log(values);
  };

  return (
    <Formik
      initialValues={{ username: '', password: '' }}
      validationSchema={validationSchema}
      onSubmit={handleSubmit}
    >
      {(formik) => (
        <form onSubmit={formik.handleSubmit}>
          {/* 在子组件中使用Field组件渲染表单字段 */}
          <ChildComponent formik={formik} />
          <button type="submit">提交</button>
        </form>
      )}
    </Formik>
  );
};

// 子组件
const ChildComponent = ({ formik }) => {
  return (
    <div>
      <label htmlFor="username">用户名：</label>
      <Field type="text" id="username" name="username" />

      {/* 显示字段的错误信息 */}
      {formik.touched.username && formik.errors.username && (
        <div>{formik.errors.username}</div>
      )}

      <label htmlFor="password">密码：</label>
      <Field type="password" id="password" name="password" />

      {/* 显示字段的错误信息 */}
      {formik.touched.password && formik.errors.password && (
        <div>{formik.errors.password}</div>
      )}
    </div>
  );
};