React+TypeScript中如何将Formik表单验证状态传递给父组件

核心问题分析 #

1. 子组件未正确触发Formik状态更新：原代码中onChange未调用Formik提供的handleChange，导致Formik无法实时更新表单值与验证错误信息。
2. 状态同步逻辑错误：仅在存在错误时反转父组件状态，未处理错误消失的场景，且依赖父组件传入的isFormValid进行反转，会导致状态不同步。
3. 父组件冗余状态：isNextButtonDisabled可直接由isFormValid推导，无需单独维护。

修改后的代码 #

1. ParentComponent 优化

import { useState } from 'react';
import ChildComponent from './ChildComponent';
import CustomButtonComponent from './CustomButtonComponent';

const ParentComponent = () => {
  const [isFormValid, setIsFormValid] = useState<boolean>(false);

  const handleNext = () => {
    if (!isFormValid) return;
    goNext();
  };

  return (
    <>
      <ChildComponent setIsFormValid={setIsFormValid} />
      <CustomButtonComponent
        type="submit"
        form="myFormikForm"
        isDisabled={!isFormValid}
      />
    </>
  );
};

2. ChildComponent 修复

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

// 示例邮箱验证规则
const emailValidationSchema = Yup.object({
  email: Yup.string()
    .email('请输入有效的邮箱地址')
    .required('邮箱不能为空'),
});

type FormProps = {
  setIsFormValid: React.Dispatch<React.SetStateAction<boolean>>;
};

export const ChildComponent: React.FC<FormProps> = ({ setIsFormValid }) => {
  return (
    <Formik
      initialValues={{ email: '' }}
      onSubmit={() => {}}
      validationSchema={emailValidationSchema}
      validateOnChange={true}
      validateOnBlur={true}
    >
      {({ errors, handleChange, isValid }) => {
        // 实时同步表单验证状态到父组件
        useEffect(() => {
          setIsFormValid(isValid);
        }, [isValid, setIsFormValid]);

        return (
          <Form id="myFormikForm">
            <Field
              name="email"
              type="email"
              placeholder="请输入邮箱"
              onChange={handleChange}
              isInvalid={!!errors.email}
            />
            {errors.email && <div className="error-text">{errors.email}</div>}
          </Form>
        );
      }}
    </Formik>
  );
};

关键修改点说明 #

• 子组件：
  • 移除冗余的isFormValid props，仅保留setIsFormValid用于状态同步。
  • 利用Formik自带的isValid属性（自动根据验证规则计算表单有效性），通过useEffect实时同步到父组件。
  • 正确绑定handleChange到表单字段，确保Formik能实时更新值并执行验证。
• 父组件：
  • 移除isNextButtonDisabled状态，直接用!isFormValid作为按钮禁用条件。
  • 初始化isFormValid为false，符合初始空表单不符合必填规则的逻辑。

内容的提问来源于stack exchange，提问作者user22137820