本教程详细讲解如何在React中实现子组件向父组件传递数据。通过在父组件定义回调函数并作为props传递给子组件，子组件在事件触发时调用该回调，将数据回传。父组件使用状态管理接收数据，并可利用`useEffect`响应数据变化，实现动态数据请求，避免直接调用组件函数。
在React应用开发中，组件之间的数据流通常是单向的，即数据从父组件流向子组件（通过props）。然而，在许多场景下，我们需要子组件将数据或事件通知给父组件。例如，一个表单输入组件（子组件）在用户提交数据后，需要将输入值传递给其父组件进行处理。本文将以一个具体的示例，详细阐述如何实现这种“子组件向父组件传递数据”的通信模式。
理解React数据流与组件通信
React的核心思想是单向数据流。父组件通过props将数据传递给子组件。当子组件需要与父组件通信时，它不能直接修改父组件的状态。正确的做法是，父组件传递一个回调函数给子组件作为prop，子组件在需要通信时调用这个回调函数，并将数据作为参数传递给它。这样，父组件就能在其回调函数中接收到子组件传来的数据，并更新自己的状态。
示例场景：从输入框组件获取数据到应用主组件
假设我们有一个InputField组件用于用户输入地址，并有一个App组件作为主应用，需要在InputField提交数据后，使用该地址进行API请求。
1. 修改子组件：InputField.js
首先，我们需要修改InputField组件，使其能够接收一个回调函数作为prop。当用户提交表单时，InputField会调用这个回调函数，并将输入值传递出去。
// InputField.js
import React from 'react';
export default function InputField({ onSubmit }) { // 接收一个名为 onSubmit 的 prop
function handleSubmit(e) {
e.preventDefault(); // 阻止浏览器默认的表单提交行为
const form = e.target;
const inputVal = form.myInput.value; // 获取输入框的值
console.log("子组件获取到的输入值:", inputVal);
// 调用父组件传递进来的回调函数，并将输入值作为参数传递
if (onSubmit && typeof onSubmit === 'function') {
onSubmit(inputVal);
}
}
return (
<form method="post" onSubmit={handleSubmit}>
<input name="myInput" id="adress-field" placeholder="Enter adress" autoComplete="on" />
<button type="submit" id="adress-button">Send</button>
</form>
);
}关键点：
- InputField组件现在接受一个名为onSubmit的prop。
- 在handleSubmit函数中，获取到inputVal后，我们调用了onSubmit(inputVal)。这意味着当表单提交时，InputField会将inputVal“回传”给父组件。
- 添加了类型检查if (onSubmit && typeof onSubmit === 'function')以增强健壮性。
2. 修改父组件：App.js
接下来，我们需要在App组件中定义一个状态来存储从InputField接收到的数据，并创建一个回调函数传递给InputField。
// App.js
import './App.css';
import AccountNumber from "./components/AccountNumber";
import InputField from "./components/InputField";
import { useEffect, useState } from "react";
function App() {
// 状态用于存储从 InputField 接收到的地址值
const [searchValue, setSearchValue] = useState(null);
// 状态用于存储API返回的tokens数据
const [tokens, setTokens] = useState([]);
// 状态用于管理加载状态
const [loading, setLoading] = useState(false);
// 定义一个回调函数，用于接收 InputField 传递过来的值
const handleSearchSubmit = (val) => {
setSearchValue(val); // 更新 searchValue 状态
};
// useEffect 钩子用于在 searchValue 变化时触发数据请求
useEffect(() => {
// 只有当 searchValue 不为 null 且不为空字符串时才进行数据请求
if (searchValue) {
setLoading(true);
fetch(`https://api.multiversx.com/accounts/${searchValue}/tokens`)
.then(response => response.json())
.then(json => setTokens(json))
.finally(() => {
setLoading(false);
});
console.log("App组件发起请求，searchValue:", searchValue);
}
// 依赖数组包含 searchValue，确保当 searchValue 改变时 useEffect 重新运行
}, [searchValue]);
// ... (其他辅助函数，如 round, numberWithSpaces 保持不变)
return (
<content className="content">
<div className="up-side">
<div className="account-number-box">
<p id="p-account-number">Total number of accounts</p>
<p id="account-number"><AccountNumber/></p>
</div>
<div className="adress-search">
{/* 将 handleSearchSubmit 函数作为 onSubmit prop 传递给 InputField */}
<InputField onSubmit={handleSearchSubmit} />
</div>
{/* 可以显示当前 searchValue 进行调试 */}
<p>当前搜索地址: {searchValue || '未输入'}</p>
</div>
<div className="down-side">
<table className="Token-section-output">
{loading ? (
<div>Loading...</div>
) : (
<>
<h1>Tokens</h1>
<table className='Token-section-output' border={0}>
<tr className='token-row-type'>
<th className='token-column'>Name</th>
<th className='center-column'>Price</th>
<th>Hold</th>
</tr>
<tr className="space20"/>
{tokens.map(token => (
<tr className='token-row' key={token.id}>
<td className='token-column'>
<img className="img-Tokens" src = {token?.assets?.pngUrl ?? "img/Question.png"} />
<p>{token.name}</p>
</td>
<td className='center-column'> <p>${round(token.price, 10000000)}</p> </td>
<td>
<p>{round(token.balance / Math.pow(10, token.decimals), 10000000)}</p>
<p className='token-hold'>${round(token.valueUsd, 10000000)}</p>
</td>
</tr>
))}
</table>
</>
)}
</table>
</div>
</content>
);
}
// 辅助函数（保持不变）
function round(nr, ten) {
return Math.round(nr * ten) / ten;
}
function numberWithSpaces(nr) {
return nr.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
}
export default App;关键点：
- useState(null): App组件引入了一个新的状态变量searchValue，初始值为null，用于存储从InputField获取的地址。
- handleSearchSubmit回调函数: 定义了一个名为handleSearchSubmit的函数。当InputField调用它时，会将传入的val更新到searchValue状态。
- <InputField onSubmit={handleSearchSubmit} />: 在渲染InputField时，将handleSearchSubmit函数作为onSubmit prop传递给它。这是实现子组件向父组件通信的关键。
- useEffect依赖项: useEffect现在依赖于searchValue。这意味着每当searchValue状态更新时（即用户提交了新的地址），useEffect中的数据请求逻辑就会重新执行，使用新的地址发起API请求。
- 条件请求: 在useEffect内部添加了if (searchValue)的判断，确保只有当searchValue有实际值时才发起API请求，避免在组件首次渲染时（searchValue为null）立即请求。
- 组件渲染方式: 重要提示：在JSX中渲染React组件时，应使用标签语法<InputField />，而不是像调用普通函数那样InputField()。InputField()会直接执行组件函数并返回JSX元素，而<InputField />则会触发React的组件生命周期和优化机制。原始问题代码中的{InputField()}是一个常见的误区，应修正为<InputField onSubmit={handleSearchSubmit} />。
总结与注意事项
通过以上步骤，我们成功地实现了React中子组件向父组件传递数据的功能。这种模式是React应用中组件间通信的基石，被称为“提升状态”（Lifting State Up）。
核心概念回顾：
- 单向数据流: 数据从父组件流向子组件。
- 回调函数: 父组件定义一个回调函数，并通过props传递给子组件。
- 子组件调用回调: 子组件在需要传递数据时，调用父组件传递过来的回调函数，并将数据作为参数传入。
- 父组件更新状态: 父组件在回调函数中接收到数据后，更新自己的状态，从而触发重新渲染。
- useEffect与依赖项: 当父组件的状态（如searchValue）更新时，可以使用useEffect来响应这些变化，执行副作用（如API请求）。useEffect的依赖项数组确保了其在正确的时间点执行。
注意事项：
- 避免直接调用组件函数: 始终使用JSX标签语法<Component />来渲染React组件，而不是Component()。
- 状态管理: 在父组件中管理从子组件接收到的数据，是React数据流的推荐实践。
- 清晰的命名: 为回调函数和props使用清晰、描述性的名称，提高代码可读性。例如，onSubmit明确表示这是一个提交事件的回调。
掌握这种通信模式对于构建复杂的、交互性强的React应用至关重要。
