如何在上级组件提交表单时更新子组件

// 上级组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [formData, setFormData] = useState({});

  const handleSubmit = () => {
    // 处理表单提交逻辑
    // ...

    // 将表单数据传递给子组件
    // 假设子组件通过props接收表单数据
    // 可以传递整个formData对象，或者根据需要传递特定字段
    // 例如： <ChildComponent formData={formData} />
  };

  return (
    <div>
      {/* 表单 */}
      <form onSubmit={handleSubmit}>
        {/* 表单元素 */}
        {/* ... */}
        <button type="submit">提交</button>
      </form>

      {/* 子组件 */}
      <ChildComponent formData={formData} />
    </div>
  );
};

export default ParentComponent;

// 子组件
import React from 'react';

const ChildComponent = ({ formData }) => {
  // 子组件接收到表单数据后，更新自身的状态或属性
  // 例如：可以将表单数据展示在子组件中
  return (
    <div>
      <p>子组件展示表单数据：</p>
      <pre>{JSON.stringify(formData, null, 2)}</pre>
    </div>
  );
};

export default ChildComponent;