React实现双向交互：父通知子验证、子回传结果的解决方案

针对你的向导组件与Formik子组件的验证交互需求，有两种符合React设计思路的成熟方案，以下是具体实现：

方案一：使用React Refs直接调用子组件的Formik验证 #

这种方式简单直接，适合组件层级较浅的场景，核心是让子组件暴露Formik实例，父组件通过Ref调用验证方法并获取结果。

步骤1：修改Formik子组件，暴露Formik实例 #

以UserInfo为例，添加可选的formikRef属性，将Formik实例传递给父组件的Ref：

import { useFormik } from 'formik';
import React from 'react';

function UserInfo({ formikRef }) {
  const formik = useFormik({
    initialValues: { name: '', email: '' },
    validationSchema: /* 你的验证规则 */,
    onSubmit: () => {}
  });

  // 将Formik实例挂载到父组件传递的Ref上
  React.useEffect(() => {
    if (formikRef) {
      formikRef.current = formik;
    }
    // 页面切换时清理Ref，避免内存泄漏
    return () => {
      if (formikRef) formikRef.current = null;
    };
  }, [formik, formikRef]);

  return (
    <form onSubmit={formik.handleSubmit}>
      {/* 表单字段示例 */}
      <input
        name="name"
        value={formik.values.name}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
      />
      {formik.touched.name && formik.errors.name && <div>{formik.errors.name}</div>}
      {/* 其他字段 */}
    </form>
  );
}

步骤2：修改Wizard组件，通过Ref触发验证并控制页面跳转 #

import { useState, useRef } from 'react';
import { Grid } from '@mui/material';

function Wizard({ children }) {
  const [currentPage, setCurrentPage] = useState(0);
  const activeFormikRef = useRef(null);

  const previousPage = () => {
    if (currentPage > 0) {
      setCurrentPage(prev => prev - 1);
      activeFormikRef.current = null;
    }
  };

  const nextPage = async () => {
    if (!activeFormikRef.current) return;

    // 调用Formik的validateForm方法，获取验证结果
    const validationErrors = await activeFormikRef.current.validateForm();
    const isValid = Object.keys(validationErrors).length === 0;

    if (isValid) {
      // 验证通过，跳转到下一页
      if (currentPage < children.length - 1) {
        setCurrentPage(prev => prev + 1);
        activeFormikRef.current = null;
      }
    } else {
      // 验证失败，标记所有字段为已触摸，触发错误提示
      activeFormikRef.current.setTouched(
        Object.fromEntries(Object.keys(activeFormikRef.current.values).map(key => [key, true])),
        true
      );
    }
  };

  const renderCurrentPage = () => {
    const currentChild = children[currentPage];
    // 给当前页面的子组件传递Ref
    return React.cloneElement(currentChild, {
      formikRef: activeFormikRef
    });
  };

  return (
    <Grid container>
      <Grid item xs={12}>
        {renderCurrentPage()}
      </Grid>
      <Grid item xs={12}>
        <button onClick={previousPage} disabled={currentPage === 0}>上一步</button>
        <button onClick={nextPage} disabled={currentPage === children.length - 1}>下一步</button>
      </Grid>
    </Grid>
  );
}

方案二：使用React Context管理验证状态 #

适合组件层级较深、或需要跨组件传递验证状态的场景，通过Context实现父组件触发验证、子组件返回结果的双向通信。

步骤1：创建Wizard Context #

import { createContext, useContext, useState, useEffect } from 'react';

const WizardContext = createContext();

export function WizardProvider({ children }) {
  const [currentPage, setCurrentPage] = useState(0);
  const [isValidationTriggered, setIsValidationTriggered] = useState(false);
  const [validationResult, setValidationResult] = useState(null);

  // 监听验证结果，决定是否跳转页面
  useEffect(() => {
    if (validationResult !== null) {
      if (validationResult && currentPage < children.length - 1) {
        setCurrentPage(prev => prev + 1);
      }
      // 重置验证状态
      setIsValidationTriggered(false);
      setValidationResult(null);
    }
  }, [validationResult, currentPage, children.length]);

  const triggerValidation = () => {
    setIsValidationTriggered(true);
  };

  return (
    <WizardContext.Provider value={{
      currentPage,
      setCurrentPage,
      triggerValidation,
      setValidationResult,
      isValidationTriggered
    }}>
      {children}
    </WizardContext.Provider>
  );
}

export function useWizard() {
  return useContext(WizardContext);
}

步骤2：修改Wizard组件使用Context #

import { Grid } from '@mui/material';
import { useWizard } from './WizardContext';

function Wizard({ children }) {
  const { currentPage, triggerValidation, setCurrentPage } = useWizard();

  const previousPage = () => {
    if (currentPage > 0) {
      setCurrentPage(prev => prev - 1);
    }
  };

  const nextPage = () => {
    triggerValidation();
  };

  const renderCurrentPage = () => {
    return children[currentPage];
  };

  return (
    <Grid container>
      <Grid item xs={12}>
        {renderCurrentPage()}
      </Grid>
      <Grid item xs={12}>
        <button onClick={previousPage} disabled={currentPage === 0}>上一步</button>
        <button onClick={nextPage} disabled={currentPage === children.length - 1}>下一步</button>
      </Grid>
    </Grid>
  );
}

步骤3：修改Formik子组件监听验证触发事件 #

import { useFormik } from 'formik';
import { useWizard } from './WizardContext';
import React from 'react';

function UserInfo() {
  const { isValidationTriggered, setValidationResult } = useWizard();
  const formik = useFormik({
    initialValues: { name: '', email: '' },
    validationSchema: /* 你的验证规则 */,
    onSubmit: () => {}
  });

  // 监听父组件触发的验证事件
  useEffect(() => {
    if (isValidationTriggered) {
      const validate = async () => {
        const errors = await formik.validateForm();
        const isValid = Object.keys(errors).length === 0;
        setValidationResult(isValid);
        
        if (!isValid) {
          // 标记所有字段为已触摸，显示错误
          formik.setTouched(
            Object.fromEntries(Object.keys(formik.values).map(key => [key, true])),
            true
          );
        }
      };
      validate();
    }
  }, [isValidationTriggered, formik, setValidationResult]);

  return (
    <form onSubmit={formik.handleSubmit}>
      {/* 表单字段 */}
    </form>
  );
}

步骤4：在App中包裹WizardProvider #

import { WizardProvider } from './WizardContext';

export function App(props) {
  return (
    <WizardProvider>
      <Wizard className='App'>
        <div>
          <UserInfo />
        </div>
        <div>
          <PaymentInfo />
        </div>
      </Wizard>
    </WizardProvider>
  );
}

方案选择建议 #

• 如果你的向导组件层级简单，子组件直接在Wizard下，优先选方案一，代码更简洁，无额外状态管理开销。
• 如果组件层级较深，或需要跨多个组件传递验证状态，选方案二，扩展性更好。

两种方案都不会影响子组件的复用性：子组件在非向导场景下使用时，只需不传formikRef（方案一）或不包裹WizardProvider（方案二）即可正常工作。

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