如何将子组件的Formik值传递给父组件以控制关联组件显隐

方案1：通过ref暴露子组件Formik实例（推荐，最小侵入原有子组件逻辑） #

思路：每个子组件用forwardRef包裹，通过useImperativeHandle把自身的Formik实例或者指定的方法/值暴露给父组件，父组件通过ref直接访问对应值，同时可以监听基础信息组件的表单变化来控制KYC显隐。

子组件（以基础信息组件为例）代码示例 #

import { useFormik, Form, Field } from 'formik';
import { forwardRef, useImperativeHandle, useEffect } from 'react';

const BaseInfoForm = forwardRef((props, ref) => {
  const formik = useFormik({
    initialValues: {
      needKyc: false,
      // 其他基础信息字段
    },
    // 你的校验、提交逻辑保持不变
  });

  // 暴露formik实例和取值方法给父组件
  useImperativeHandle(ref, () => ({
    formik,
    getValues: () => formik.values,
  }));

  // 可选：表单值变化时触发父组件传入的回调，实现实时监听
  useEffect(() => {
    props.onValuesChange?.(formik.values);
  }, [formik.values, props.onValuesChange]);

  return (
    <Form>
      <Field name="needKyc" type="checkbox" label="是否需要KYC校验" />
      {/* 其他基础信息表单项 */}
    </Form>
  );
});

export default BaseInfoForm;

父组件代码示例 #

import { useRef, useState } from 'react';
import BaseInfoForm from './BaseInfoForm';
import EnterpriseInfoForm from './EnterpriseInfoForm';
import KycInfoForm from './KycInfoForm';

const ParentForm = () => {
  const baseInfoRef = useRef(null);
  const enterpriseRef = useRef(null);
  const kycRef = useRef(null);
  const [showKyc, setShowKyc] = useState(false);

  // 统一提交所有子表单的逻辑
  const handleAllSubmit = () => {
    const baseValues = baseInfoRef.current?.getValues();
    const enterpriseValues = enterpriseRef.current?.getValues();
    const kycValues = showKyc ? kycRef.current?.getValues() : {};
    // 合并所有表单值后提交
    console.log('所有表单值：', { ...baseValues, ...enterpriseValues, ...kycValues });
  };

  return (
    <div>
      {/* 传入onValuesChange实时获取基础信息的变化，控制KYC显隐 */}
      <BaseInfoForm 
        ref={baseInfoRef} 
        onValuesChange={(values) => setShowKyc(values.needKyc)} 
      />
      <EnterpriseInfoForm ref={enterpriseRef} />
      {showKyc && <KycInfoForm ref={kycRef} />}
      <button onClick={handleAllSubmit}>提交全部表单</button>
    </div>
  );
};

export default ParentForm;

方案2：状态提升（适合仅需共享少量字段的场景） #

思路：把控制KYC显隐的核心字段提到父组件维护，基础信息组件的Formik变化时同步更新父组件的状态，父组件用这个状态控制KYC组件显隐，不需要改动其他两个子组件的逻辑。

• 父组件维护needKyc状态，传递修改状态的方法给基础信息组件
• 基础信息组件内部监听对应字段的变化，同步更新父组件的状态
• 父组件直接用needKyc状态控制KYC信息组件的显示隐藏

注意事项 #

• 如果KYC组件隐藏后需要保留之前填写的内容，可以给KYC组件加状态暂存逻辑，不要直接销毁组件时清空Formik值
• 需要父组件统一校验所有子表单时，优先选ref方案，可以直接调用每个子组件的formik.validateForm()方法完成校验
• 无需引入全局状态管理工具（如Redux、Zustand）实现该需求，避免增加不必要的复杂度

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