本文详细介绍了在react应用中，如何实现子组件向父组件传递数据。通过利用react的单向数据流特性，结合回调函数作为props和父组件的状态管理，可以安全有效地将子组件（如表单输入）的数据传递给父组件，进而触发数据请求等逻辑。
在React应用开发中，组件之间的数据流动是核心概念之一。常见的场景是父组件向子组件传递数据（通过props），但当子组件需要将其内部状态或事件产生的数据反馈给父组件时，就需要采用特定的模式。本文将以一个具体的例子，讲解如何将子组件InputField中的用户输入值传递给父组件App，并用于API请求。
理解React的数据流
React推崇单向数据流（Unidirectional Data Flow）。这意味着数据通常从父组件流向子组件。如果子组件需要影响父组件的状态，它不能直接修改父组件的变量。相反，子组件应该通过调用父组件传递给它的函数（作为props）来通知父组件进行状态更新。这种模式被称为“提升状态”（Lifting State Up）或“回调函数模式”。
实现子组件向父组件传递数据
我们将通过以下步骤实现数据传递：
- 修改子组件InputField，使其接受一个回调函数作为props。
- 在InputField的事件处理函数中，调用这个回调函数，并传入需要传递的数据。
- 修改父组件App，定义一个状态来存储从子组件接收到的数据。
- 在App中定义一个函数，作为回调函数传递给InputField。
- 在App的useEffect中，监听这个状态的变化，并触发相应的API请求。
1. 修改子组件：InputField.js
首先，我们需要让InputField组件能够接受一个名为onSubmit的prop，这个prop将是一个函数。当用户提交表单时，handleSubmit函数会获取输入值inputVal，然后调用这个onSubmit prop，并将inputVal作为参数传递出去。
// InputField.js
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 (
);
}注意事项：
- InputField现在是一个受控组件，它通过props接收行为。
- onSubmit是一个约定俗成的prop名，表示当子组件内部发生“提交”事件时，父组件应该执行的逻辑。
2. 修改父组件：App.js
接下来，我们需要在App组件中：
- 使用useState定义一个状态变量，例如searchValue，用于存储从InputField接收到的地址值。
- 定义一个函数handleSearchSubmit，它将作为onSubmit prop传递给InputField。当InputField调用onSubmit时，handleSearchSubmit会被执行，并更新searchValue状态。
- 将InputField组件正确地渲染到DOM中，并传递handleSearchSubmit作为其onSubmit prop。
- 修改useEffect，使其依赖于searchValue状态，并在searchValue更新时触发API请求。
// 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'
// token fetch 相关的状态
const [tokens, setTokens] = useState([]);
const [loading, setLoading] = useState(false);
// 定义一个回调函数，用于接收InputField传递过来的值
const handleSearchSubmit = (val) => {
setSearchValue(val); // 更新searchValue状态
};
// useEffect 钩子用于处理副作用，例如数据获取
useEffect(() => {
// 只有当 searchValue 有效时才进行数据请求
if (searchValue) {
setLoading(true);
fetch(`https://api.multiversx.com/accounts/${searchValue}/tokens`)
.then(response => response.json())
.then(json => setTokens(json))
.catch(error => {
console.error("Error fetching tokens:", error);
setTokens([]); // 请求失败时清空或重置tokens
})
.finally(() => {
setLoading(false);
});
} else {
// 如果 searchValue 为空，可以清空tokens或显示提示
setTokens([]);
setLoading(false);
}
console.log("Current tokens state:", tokens); // 注意：这里可能打印的是旧的tokens状态
}, [searchValue]); // 依赖数组中包含 searchValue，当其改变时重新运行 effect
function round(nr, ten) {
return Math.round(nr * ten) / ten;
}
function numberWithSpaces(nr) {
return nr.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
}
return (
Total number of accounts
{/* 正确地渲染 InputField 组件，并传递回调函数 */}
Current Search Value: {searchValue}
);
}
export default App;
关键点解析：
- useState(''): searchValue被初始化为空字符串。这样，在组件首次渲染时，useEffect中的条件if (searchValue)将为假，从而避免了向https://api.multiversx.com/accounts//tokens这样的无效URL发起请求。
-
: 这是在React中渲染组件的正确方式。切勿直接调用InputField()函数，因为那样会绕过React的组件生命周期和状态管理机制。 - useEffect依赖数组[searchValue]: 这是至关重要的。它告诉React，只有当searchValue的值发生变化时，才重新运行useEffect内部的代码。这确保了每次用户提交新的地址时，都会触发一次新的数据请求。
总结与最佳实践
通过上述步骤，我们成功地实现了从子组件InputField向父组件App传递数据，并利用该数据触发API请求。这种模式是React中处理组件间通信的常见且推荐的方式。
核心概念回顾：
- 单向数据流： 数据从父组件流向子组件。子组件通过回调函数通知父组件更新状态。
- 状态提升： 当多个组件需要共享或响应同一个数据时，将该数据提升到它们最近的共同父组件中管理。
- 回调函数作为Props： 父组件定义一个函数，并将其作为prop传递给子组件。子组件在特定事件发生时调用这个函数，将数据传回父组件。
- useState： 用于在函数组件中声明和管理状态。
- useEffect： 用于处理组件的副作用，如数据获取、订阅或手动更改DOM。它的依赖数组决定了何时重新运行副作用。
遵循这些原则，可以构建出结构清晰、可维护性强的React应用。
