React组件通信：从子组件向父组件传递数据_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

React组件通信：从子组件向父组件传递数据

2025-10-13

浏览次数：次

返回列表

react组件通信：从子组件向父组件传递数据

本教程详细讲解了在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组件需要完成以下几件事：

行业贸易网站管理系统 2007 Beta 1

1.修正BUG站用资源问题,优化程序2.增加关键词搜索3.修改报价4.修正BUG 水印问题5.修改上传方式6.彻底整合论坛,实现一站通7.彻底解决群发垃圾信息问题。注册会员等发垃圾邮件7.彻底解决数据库安全9.修改交易方式.增加网站担保,和直接交易两中10.全站可选生成html.和单独新闻生成html(需要装组建)11. 网站有10中颜色选择适合不同的行业不同的颜色12.修改竞价格排名方式13.修

0 查看详情行业贸易网站管理系统 2007 Beta 1

声明一个状态变量来存储从InputField接收到的值。
创建一个处理函数，作为onSubmit prop传递给InputField。这个函数将负责更新状态变量。
修改useEffect钩子，使其依赖于这个新的状态变量，以便在输入值变化时重新发起API请求。
重要提示：在React中，组件应该通过JSX语法来渲染，而不是像调用普通函数那样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'>
                        @@##@@ 
                          <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状态。
是关键所在。我们将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()。
回调函数命名：通常，传递给子组件的回调函数以on开头，后跟事件名称（如onSubmit, onClick等），以清晰表明其用途。
初始加载与空状态：在useEffect中处理searchValue为null或空字符串的情况，避免发送不必要的或错误的API请求。
错误处理：在fetch请求中添加.catch()块来处理网络错误或API响应错误，提升用户体验。
加载指示：在数据请求期间显示加载状态（如“Loading...”），告知用户应用正在工作。

总结

通过本教程，我们学习了如何在React中实现子组件向父组件传递数据。核心方法是父组件将一个回调函数作为props传递给子组件，子组件在特定事件发生时调用此回调函数并传递数据。父组件接收到数据后，可以更新自身的状态，并结合useEffect钩子来响应这些数据变化，执行相应的副作用操作，如发起API请求。掌握这一模式对于构建复杂且交互性强的React应用至关重要。