本教程详细讲解了在React中如何实现子组件向父组件传递数据。通过利用Props传递回调函数，父组件可以接收并处理子组件触发的事件和数据，同时结合`useState`管理状态和`useEffect`响应数据变化，实现动态数据流和UI更新。
在React应用开发中，组件之间的数据通信是核心概念之一。虽然父组件向子组件传递数据通常通过props实现，但子组件向父组件传递数据（即“数据提升”）则需要不同的策略。本文将详细介绍如何通过回调函数和React的状态管理机制，实现子组件（如一个输入表单）将其内部数据传递给父组件，并触发父组件中的数据请求等副作用。
理解React的数据流
React推崇单向数据流（One-Way Data Flow），这意味着数据通常是从父组件流向子组件。当子组件需要影响父组件的状态或行为时，它不能直接修改父组件的数据。相反，父组件会向子组件传递一个函数（作为props），子组件在特定事件发生时调用这个函数，并将需要传递的数据作为参数传递给它。父组件接收到数据后，可以更新自身的状态，从而实现数据从子组件“回流”到父组件。
实施子组件向父组件的数据传递
我们将以一个输入框组件InputField和一个主应用组件App为例，演示如何将InputField中用户输入的值传递给App组件，并用于App组件中的API请求。
1. 修改子组件：InputField.js
InputField组件负责渲染一个输入框和提交按钮。当用户提交表单时，它需要将输入的值传递给父组件。这可以通过在组件的props中接收一个回调函数来实现。
首先，修改InputField组件以接收一个名为onSubmit的prop。这个onSubmit prop将是一个函数，由父组件提供。当表单提交时，我们调用这个函数，并将输入框的值作为参数传递给它。
// 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("Input value from child:", inputVal);
// 调用父组件传递的回调函数，并传入输入值
if (onSubmit) {
onSubmit(inputVal);
}
}
return (
<form method="post" onSubmit={handleSubmit}>
<input name="myInput" id="adress-field" placeholder="Enter address" autoComplete="on" />
<button type="submit" id="adress-button">Send</button>
</form>
);
}在上述代码中：
- InputField组件现在解构了onSubmit prop。
- 在handleSubmit函数内部，获取到inputVal后，我们调用了onSubmit(inputVal)。这意味着当表单提交时，inputVal会被发送到父组件。
2. 修改父组件：App.js
App组件需要完成以下几件事：
- 声明一个状态变量来存储从InputField接收到的值。
- 创建一个处理函数，作为onSubmit prop传递给InputField。这个函数将负责更新状态变量。
- 修改useEffect钩子，使其依赖于这个新的状态变量，以便在输入值变化时重新发起API请求。
- 重要提示：在React中，组件应该通过JSX语法<InputField />来渲染，而不是像调用普通函数那样InputField()。直接调用函数会导致每次渲染都创建一个新的组件实例，失去React的组件优化和生命周期管理。
// 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请求的token数据
const [tokens, setTokens] = useState([]);
// 状态用于管理加载状态
const [loading, setLoading] = useState(false);
// 处理从InputField组件传递过来的值
const handleSearchSubmit = (val) => {
setSearchValue(val); // 更新searchValue状态
};
// useEffect 钩子用于在searchValue变化时发起API请求
useEffect(() => {
// 只有当searchValue不为null时才发起请求，避免初始加载时发送无效请求
if (searchValue) {
setLoading(true);
fetch(`https://api.multiversx.com/accounts/${searchValue}/tokens`) // 使用searchValue
.then(response => response.json())
.then(json => setTokens(json))
.catch(error => {
console.error("Error fetching tokens:", error);
setTokens([]); // 请求失败时清空数据
})
.finally(() => {
setLoading(false);
});
} else {
setTokens([]); // 如果没有搜索值，则清空token数据
}
console.log("Current tokens state:", tokens); // 注意：这里的tokens可能是旧值，因为useState是异步更新的
}, [searchValue]); // 将searchValue添加到依赖数组中，当searchValue变化时重新执行useEffect
// ... (round 和 numberWithSpaces 函数保持不变)
function round(nr, ten) { // arondi un chiffre.
return Math.round(nr * ten) / ten;
}
function numberWithSpaces(nr) { // formate un chiffre(x xxx xxx).
return nr.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
}
return (
<div className="content"> {/* 将 <content> 改为 <div>，因为 content 不是标准HTML标签 */}
<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">
{/* 正确地渲染InputField组件，并将handleSearchSubmit作为onSubmit prop传递 */}
<InputField onSubmit={handleSearchSubmit} />
</div>
<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.length > 0 ? tokens.map(token => (
<tr className='token-row' key={token.identifier || token.id}> {/* 使用更稳定的key */}
<td className='token-column'>
<img className="img-Tokens" src = {token?.assets?.pngUrl ?? "img/Question.png"} alt={token.name || "Token icon"} />
<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>
)) : (
<tr><td colSpan="3">暂无代币数据，请尝试输入地址。</td></tr>
)}
</table>
</>
)}
</table>
</div>
</div>
);
}
export default App;在上述代码中：
- useState(null)创建了一个名为searchValue的状态变量，用于存储从InputField获取的地址。
- handleSearchSubmit函数被定义为接收一个参数val，并使用setSearchValue(val)来更新searchValue状态。
- <InputField onSubmit={handleSearchSubmit} />是关键所在。我们将handleSearchSubmit函数作为onSubmit prop传递给InputField。当InputField内部调用onSubmit(inputVal)时，实际上就是调用了App组件中的handleSearchSubmit函数，并将inputVal作为参数传递过去。
- useEffect的依赖数组现在包含了[searchValue]。这意味着每当searchValue状态发生变化时（即用户提交了新的地址），useEffect中的代码就会重新执行，从而触发新的API请求。
- 添加了if (searchValue)条件判断，确保只有当searchValue有值时才发起API请求，避免在组件初次渲染时（searchValue为null）发送无效请求。
- 将content标签修正为div，并为img标签添加了alt属性。
关键概念回顾
- Props (属性)：是React组件之间传递数据的主要方式。父组件通过props向子组件传递数据和函数。
- State (状态)：组件内部管理数据的方式。当状态改变时，组件会重新渲染。
- 回调函数作为Props：实现子组件向父组件通信的关键机制。子组件调用父组件作为prop传递的函数，并将数据作为参数传递。
- useEffect依赖数组：控制副作用（如API请求）执行时机的重要工具。当依赖数组中的值发生变化时，useEffect会重新执行。
注意事项
- 组件渲染方式：务必使用JSX语法<ComponentName />来渲染组件，而不是ComponentName()。
- 回调函数命名：通常，传递给子组件的回调函数以on开头，后跟事件名称（如onSubmit, onClick等），以清晰表明其用途。
- 初始加载与空状态：在useEffect中处理searchValue为null或空字符串的情况，避免发送不必要的或错误的API请求。
- 错误处理：在fetch请求中添加.catch()块来处理网络错误或API响应错误，提升用户体验。
- 加载指示：在数据请求期间显示加载状态（如“Loading...”），告知用户应用正在工作。
总结
通过本教程，我们学习了如何在React中实现子组件向父组件传递数据。核心方法是父组件将一个回调函数作为props传递给子组件，子组件在特定事件发生时调用此回调函数并传递数据。父组件接收到数据后，可以更新自身的状态，并结合useEffect钩子来响应这些数据变化，执行相应的副作用操作，如发起API请求。掌握这一模式对于构建复杂且交互性强的React应用至关重要。
