React简历生成器：单提交按钮验证多子组件表单问题

我用React开发一个入门级简历生成器，App.js是类组件，返回<PersonalInfo />、<Experience />、<Education />子组件，还有一个type="button"的提交按钮。点击每个组件下方的“add”按钮可以添加更多<PersonalInfo />和<Experience />组件。

每个子组件根据自身submission状态，要么显示表单，要么展示用户输入的内容。我希望父组件的提交按钮能验证所有子组件的表单，防止提交空字段，但尝试了以下代码后，输入字段未得到验证，表单也未提交：

function onSubmit(e) {
    e.preventDefault();
    const forms = document.querySelectorAll('form');

    if(forms.length) {
      forms.forEach(form => form.requestSubmit();
    }
 }

现有组件代码 #

App.js（Main组件）

import React, { Component } from "react";
import uniqid from "uniqid";
import Experience from "./CVForm/Experience";

class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
     // 其他组件的状态定义在此
      experienceValues: [
        {
          id: uniqid(),
          jobTitle: "",
          employer: "",
          from: "",
          to: "",
          mainResponsibilities: "",
          submission: false,
        },
      ],
    };
    // 初始化存储子组件ref的数组
    this.experienceRefs = [];
    // 绑定事件处理函数
    this.onSubmit = this.onSubmit.bind(this);
    this.onExperienceSubmit = this.onExperienceSubmit.bind(this);
  }

// 其他事件处理函数（如onExperienceChange、onExperienceEdit等）

  onExperienceSubmit = (e) => {
    e.preventDefault();
    const id = e.target.dataset.id;
    this.setState(prevState => ({
      experienceValues: prevState.experienceValues.map(el => {
        if (el.id === id) {
          return {...el, submission: true};
        }
        return el;
      })
    }));
  }

  onSubmit(e) {
    e.preventDefault();
    let isValid = true;

    // 验证所有未提交的Experience表单
    this.experienceRefs.forEach(ref => {
      if (ref && ref.formRef.current) {
        const form = ref.formRef.current;
        // 检查表单有效性
        if (!form.checkValidity()) {
          isValid = false;
          // 显示原生验证提示
          form.reportValidity();
        }
      }
    });

    // 同样的逻辑可以复制到PersonalInfo和Education组件的验证

    if (isValid) {
      // 所有表单验证通过，触发提交
      this.experienceRefs.forEach(ref => {
        if (ref && ref.formRef.current) {
          ref.formRef.current.dispatchEvent(new Event('submit'));
        }
      });
      // 这里可以添加全局提交后的逻辑，比如生成简历预览或导出
    }
  }

  render() {
    const { personalInfoValues, educationValues, experienceValues } =
      this.state;

    return (
      <div>
           <h2>Work Experience</h2>
        {experienceValues.map((el) => {
          return (
            <Experience
              key={el.id}
              ref={(ref) => {
                // 避免重复添加ref
                const index = this.experienceRefs.findIndex(item => item?.props?.id === el.id);
                if (index === -1) {
                  this.experienceRefs.push(ref);
                } else {
                  this.experienceRefs[index] = ref;
                }
              }}
              id={el.id}
              experienceValues={experienceValues}
              onExperienceChange={this.onExperienceChange}
              onExperienceEdit={this.onExperienceEdit}
              onDeleteExperience={this.onDeleteExperience}
              onExperienceSubmit={this.onExperienceSubmit}
            />
          );
        })}
        <button type="button" onClick={this.onAddExperience}>
          Add
        </button>
        <button type="button" onClick={this.onSubmit}>
          Submit
        </button>
      </div>
    );
  }
}

export default Main;

Experience.js

import React, { useRef, forwardRef, useImperativeHandle } from "react";
import uniqid from "uniqid";

const Experience = forwardRef((props, ref) => {
  const {
    id,
    experienceValues,
    onExperienceChange,
    onExperienceEdit,
    onDeleteExperience,
    onExperienceSubmit
  } = props;
  const experience = experienceValues.filter((el) => el.id === id)[0];
  const experienceArr = Object.entries(experience);
  const formRef = useRef(null);

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

  return (
    <section>
      {experience.submission ? (
        <div>
          {experienceArr.slice(1).map((el) => (
            <p key={uniqid()}>{el[1]}</p>
          ))}
          <button
            type="button"
            onClick={() => {
              onExperienceEdit(id);
            }}
          >
            Edit
          </button>
          {experienceValues.length > 1 && (
            <button
              type="button"
              onClick={() => {
                onDeleteExperience(id);
              }}
            >
              Delete
            </button>
          )}
        </div>
      ) : (
        <form ref={formRef} data-id={id} onSubmit={onExperienceSubmit}>
          <input
            name="jobTitle"
            type="text"
            placeholder="Job title"
            value={experience.jobTitle}
            onChange={(e) => onExperienceChange(e, id)}
            required
          />
          <input
            name="employer"
            type="text"
            placeholder="Employer"
            value={experience.employer}
            onChange={(e) => onExperienceChange(e, id)}
            required
          />
          {/* 其他输入字段 */}
        </form>
      )}
    </section>
  );
});

export default Experience;

解决思路说明 #

1. 避免直接操作DOM：用React的ref机制获取子组件的表单元素，符合React数据流规范，替代原生DOM查询操作。
2. 触发原生验证：通过form.checkValidity()检查表单有效性，form.reportValidity()自动显示浏览器原生的必填字段提示。
3. 统一控制提交：父组件先批量验证所有表单，全部通过后再触发每个子组件的提交逻辑，更新submission状态切换到展示模式。

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