本文详解 react 中通过回调函数实现子组件向父组件传值的核心机制，重点纠正常见错误：子组件需传递完整对象而非单个字符串，并提供可运行的代码示例与关键注意事项。
在 React 应用中，子组件向父组件传递数据是基础且高频的需求，典型场景如表单提交后将用户输入同步至父状态。其核心原理是：父组件定义回调函数并作为 props 传入子组件，子组件在事件触发时调用该函数并传入所需数据。
然而，原始代码存在一个关键逻辑错误：Child.js 中的 onTrigger 方法分别两次调用 sendDataHandler，每次仅传入一个字符串（event.target.myname.value 和 event.target.myemail.value），导致父组件的 setData 被连续覆盖——第二次调用会丢失第一次的数据，最终 childDetails 状态仅保留最后一个值（通常是 email），无法实现姓名与邮箱的同步更新。
✅ 正确做法是：在子组件中构造一个包含全部字段的对象，一次性传递给父组件回调函数。修改后的 Child.js 关键代码如下：
onTrigger = (event) => {
const formData = {
name: event.target.myname.value,
email: event.target.myemail.value
};
this.props.sendDataHandler(formData); // ✅ 一次性传入完整对象
event.preventDefault();
};同时，确保 App.js 中的 sendBackData 回调函数能正确接收并更新状态（当前实现已正确）：
const sendBackData = (childDetails) => {
setData(childDetails); // ✅ 接收对象并整体更新 state
console.log(childDetails);
};⚠️ 额外注意事项：
- 表单 元素应添加 name 属性（当前代码已满足），否则 event.target.xxx.value 将无法正确获取；
- 若使用受控组件（推荐），应在父组件中管理输入值并双向绑定，但本例为非受控表单，依赖 event.target 是合理方案；
- 建议为输入框添加 required 属性或简单校验，避免空值提交；
- 函数组件写法（配合 useRef 或 useState）可替代类组件，但回调传值逻辑完全一致。
通过以上修正，用户在子组件表单中输入姓名和邮箱并点击“Submit”后，父组件将实时渲染出完整的、格式正确的数据，真正实现子 → 父的数据流闭环。
