如何正确实现表单数据加载与提交？基于A/B/C组件架构的方案问询

一、数据加载流程（C触发加载B的数据） #

因为B是A的子组件且仅负责展示，B的数据需由A传递，加载逻辑需通过上层容器或状态管理串联：

• 给C的「加载B的数据」按钮绑定点击事件，触发上层容器（或状态管理）的加载方法。
• 上层容器发起数据请求（或从缓存/数据源获取），拿到数据后通过props传递给A，再由A转发给子组件B进行展示。

二、表单提交流程（C负责提交A的输入数据） #

C需要获取A的输入数据，核心是让A的输入状态能被C访问到：

• 组件A自身维护输入状态，通过回调或状态管理工具把输入数据同步到上层容器。
• C的「提交」按钮点击时，获取A的输入数据，先做合法性校验（比如非空检查），再发起提交请求。
• 提交完成后，根据结果给用户反馈（如弹窗提示），必要时重置A的输入状态。

代码示例（React场景） #

// 上层容器组件
import { useState } from 'react';

function ParentContainer() {
  const [bDisplayData, setBDisplayData] = useState(null);
  const [aInputValue, setAInputValue] = useState('');

  // 加载B数据的方法
  const loadBData = () => {
    // 模拟API请求
    setTimeout(() => {
      setBDisplayData({ content: '组件B展示的信息内容' });
    }, 600);
  };

  // 表单提交方法
  const submitForm = () => {
    if (!aInputValue.trim()) {
      alert('请填写输入内容');
      return;
    }
    // 模拟提交请求
    console.log('提交的表单数据:', aInputValue);
    alert('表单提交成功');
  };

  return (
    <div>
      <ComponentA 
        inputValue={aInputValue} 
        onInputChange={setAInputValue} 
        bData={bDisplayData} 
      />
      <ComponentC 
        onLoadClick={loadBData} 
        onSubmitClick={submitForm} 
      />
    </div>
  );
}

// 组件A：输入数据+嵌套B组件
function ComponentA({ inputValue, onInputChange, bData }) {
  return (
    <div className="component-a">
      <input 
        type="text"
        value={inputValue}
        onChange={(e) => onInputChange(e.target.value)}
        placeholder="请输入数据"
      />
      <ComponentB displayData={bData} />
    </div>
  );
}

// 组件B：仅展示信息
function ComponentB({ displayData }) {
  return (
    <div className="component-b">
      {displayData ? (
        <p>{displayData.content}</p>
      ) : (
        <p>暂无数据，请点击加载按钮</p>
      )}
    </div>
  );
}

// 组件C：操作按钮容器
function ComponentC({ onLoadClick, onSubmitClick }) {
  return (
    <div className="component-c">
      <button onClick={onLoadClick}>加载B的数据</button>
      <button onClick={onSubmitClick}>提交表单</button>
    </div>
  );
}

扩展说明 #

• 若使用Vue框架，逻辑一致：通过父组件的响应式状态传递数据，C组件通过$emit触发父方法实现加载和提交。
• 复杂项目中可使用Redux、Pinia等状态管理工具，统一存储A的输入数据和B的展示数据，C直接调用状态管理的action即可，无需上层容器中转。

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