如何在 React 中正确实现子组件向父组件传递数据（Props 回传）

本文详解 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 (     
       
Passing Data from Child to Parent Component
              
         
The following is the data sent from Child component:
         
           Name: {childDetails.name}           
           Email ID: {childDetails.email}         
       
     
   ); } 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 数据流规范的子→父通信。