父组件提交按钮触发子组件useReducer的handleCheck验证方案

对于多子组件场景，状态提升并非最优解——它会让父组件承担过多的状态管理和验证逻辑，随着子组件数量增加，代码会快速臃肿。更轻量的方案是通过React Refs收集子组件实例，并调用子组件暴露的验证方法，具体实现如下：

步骤1：子组件暴露验证方法 #

在WorkExperience.tsx中，使用forwardRef和useImperativeHandle将内置的handleCheck方法暴露给父组件：

import { useReducer, useImperativeHandle, forwardRef } from 'react';

// 定义父组件可调用的方法类型
export type WorkExperienceHandle = {
  handleCheck: () => boolean;
};

const WorkExperience = forwardRef<WorkExperienceHandle, {}>((props, ref) => {
  const [state, dispatch] = useReducer((state, action) => {
    switch (action.type) {
      case 'UPDATE_FIELD':
        return { ...state, [action.field]: action.value };
      case 'VALIDATE':
        // 子组件内置的验证逻辑
        const errors = {};
        if (!state.companyName) errors.companyName = '公司名称不能为空';
        if (!state.position) errors.position = '职位不能为空';
        return { ...state, errors };
      default:
        return state;
    }
  }, { companyName: '', position: '', errors: {} });

  const handleCheck = () => {
    dispatch({ type: 'VALIDATE' });
    // 返回验证结果：无错误则通过
    return Object.keys(state.errors).length === 0;
  };

  // 向父组件暴露handleCheck方法
  useImperativeHandle(ref, () => ({ handleCheck }));

  return (
    <div className="work-experience">
      <input
        type="text"
        value={state.companyName}
        onChange={(e) => dispatch({ type: 'UPDATE_FIELD', field: 'companyName', value: e.target.value })}
        placeholder="公司名称"
      />
      {state.errors.companyName && <span className="error">{state.errors.companyName}</span>}
      
      <input
        type="text"
        value={state.position}
        onChange={(e) => dispatch({ type: 'UPDATE_FIELD', field: 'position', value: e.target.value })}
        placeholder="职位"
      />
      {state.errors.position && <span className="error">{state.errors.position}</span>}
    </div>
  );
});

export default WorkExperience;

步骤2：父组件收集子组件Ref并触发验证 #

在PersonalInfo.tsx中，用数组Ref存储所有子组件实例，点击提交按钮时遍历调用每个子组件的handleCheck：

import { useRef, useState } from 'react';
import WorkExperience, { WorkExperienceHandle } from './WorkExperience';

const PersonalInfo = () => {
  const [workExperiences, setWorkExperiences] = useState([{}]);
  const childRefs = useRef<WorkExperienceHandle[]>([]);

  // 添加新的工作经历组件
  const addWorkExperience = () => {
    setWorkExperiences([...workExperiences, {}]);
  };

  // 更新子组件Ref集合，处理组件卸载场景
  const updateChildRef = (index: number, ref: WorkExperienceHandle | null) => {
    if (ref) {
      childRefs.current[index] = ref;
    } else {
      childRefs.current = childRefs.current.filter((_, i) => i !== index);
    }
  };

  // 提交时触发所有子组件验证
  const handleSubmit = () => {
    let allValid = true;
    childRefs.current.forEach(child => {
      const isValid = child.handleCheck();
      if (!isValid) allValid = false;
    });

    if (allValid) {
      // 所有验证通过，执行提交逻辑
      console.log('表单验证通过，提交数据');
    } else {
      console.log('存在未通过验证的工作经历项');
    }
  };

  return (
    <div className="personal-info">
      {/* 个人信息字段省略 */}
      
      <div className="work-experiences-container">
        {workExperiences.map((_, index) => (
          <WorkExperience
            key={index}
            ref={(ref) => updateChildRef(index, ref)}
          />
        ))}
        <button onClick={addWorkExperience}>添加工作经历</button>
      </div>

      <button onClick={handleSubmit}>提交表单</button>
    </div>
  );
};

export default PersonalInfo;

方案优势 #

• 子组件保持独立：状态管理和验证逻辑仍在子组件内部，父组件仅负责触发验证，代码职责清晰。
• 扩展性强：新增子组件时无需修改父组件核心逻辑，只需添加到状态数组即可。
• 性能友好：无需频繁同步子组件状态到父组件，避免不必要的重渲染。

关于状态提升的补充 #

如果你的场景需要在父组件中统一收集所有子组件的表单数据，状态提升是可行的，但仅用于触发验证的话，上述Ref方案更简洁。若选择状态提升，父组件需要维护所有子组件的状态和错误信息，每个子组件的输入变化都要同步到父组件，会增加父组件的复杂度，不推荐仅为验证而使用。

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