本文详解 react 中子组件通过回调函数向父组件传递表单数据的完整实现，重点解决因参数类型错误导致的数据接收失败问题，并提供可直接运行的优化代码示例。
在 React 应用中，父子组件通信是基础且高频的需求。常见误区是：子组件误将多个独立值（如 name、email）分多次调用父组件回调函数，或仅传入字符串而非结构化对象，导致父组件 useState 无法正确更新状态。你提供的代码中，Child.onTrigger 方法连续两次调用 sendDataHandler，分别传入 name 和 email 字符串，这会覆盖式更新状态（例如第一次设 childDetails = "Bala"，第二次设为 "bala@example.com"），最终 childDetails.name 和 childDetails.email 均为 undefined —— 这正是页面未渲染预期结果的根本原因。
✅ 正确做法是：在子组件中收集全部字段，组装为一个与父组件 state 结构一致的对象，再单次调用回调函数。
以下是修复后的完整代码：
✅ App.js（父组件）保持不变（逻辑正确）
import React, { useState } from "react";
import Child from "./components/Child";
function App() {
const [childDetails, setData] = useState({
name: "?",
email: "?",
});
const sendBackData = (formData) => {
setData(formData); // ✅ 接收完整对象，直接赋值
console.log("Received from child:", formData);
};
return (
);
}
export default App;
✅ Child.js（子组件）关键修复点
import React from "react";
class Child extends React.Component {
onTrigger = (event) => {
event.preventDefault();
// ✅ 正确：一次性收集所有字段，构造匹配父组件 state 结构的对象
const formData = {
name: event.target.myname.value.trim(),
email: event.target.myemail.value.trim()
};
this.props.sendDataHandler(formData); // ✅ 单次调用，传入完整对象
};
render() {
return (
);
}
}
export default Child;? 关键注意事项：
- ? 表单字段需设置 name 属性（已满足），否则 event.target.[name] 无法取值；
- ? 使用 type="email" 替代 type="text" 可启用浏览器原生邮箱校验；
- ? 添加 required 属性提升表单健壮性；
- ? 调用 .trim() 避免空格干扰；
- ? event.preventDefault() 必须置于处理逻辑之前，防止页面刷新导致状态丢失；
- ? 若后续需支持函数组件写法，可使用 useRef 或受控组件（value + onChange）进一步优化交互体验。
通过以上修正，输入 Name: Bala 和 Email: bala@example.com 后点击 Submit，父组件将准确显示：
Name: Bala Email ID: bala@example.com
真正实现清晰、可靠、符合 React 数据流规范的子→父通信。
