投稿获客
广告
广告 广告 广告
广告 广告 广告 广告
广告 █ 推荐【菠萝云】香港16G内存99元 【CDNCloud】极速、安全可靠的加速体验 广告位联系QQ：253000106 【UStat】免费网站统计平台 SSL证书低至2折 单域名36元起 免费测试！海总一手APK免杀处理 广告位联系QQ：253000106 CDN 服务器 反炸 劫持 域名屏蔽 【UStat】专业网站统计平台 域名注册：海量域名快速注册 安卓免杀 谷歌报毒 封装 苹果签名 广告位联系QQ：253000106 【域名被劫持污染如何处理】 安卓免杀★超级签★封装★谷歌屏蔽 广告位联系QQ：253000106

*本站广告为第三方投放，如发生纠纷，请向本站索取第三方联系方式沟通

  1. 创想鸟首页
  2. 好文分享

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

程序猿 • • 好文分享 • 阅读 0

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.jsimport 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 (                      );}

在上述代码中：

InputField组件现在解构了onSubmit prop。在handleSubmit函数内部，获取到inputVal后，我们调用了onSubmit(inputVal)。这意味着当表单提交时，inputVal会被发送到父组件。

2. 修改父组件：App.js

App组件需要完成以下几件事：

声明一个状态变量来存储从InputField接收到的值。创建一个处理函数，作为onSubmit prop传递给InputField。这个函数将负责更新状态变量。修改useEffect钩子，使其依赖于这个新的状态变量，以便在输入值变化时重新发起API请求。重要提示：在React中，组件应该通过JSX语法来渲染，而不是像调用普通函数那样InputField()。直接调用函数会导致每次渲染都创建一个新的组件实例，失去React的组件优化和生命周期管理。

// App.jsimport './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 (    
 {/* 将  改为 
，因为 content 不是标准HTML标签 */}        
            
                
Total number of accounts
                
            
            
                {/* 正确地渲染InputField组件，并将handleSearchSubmit作为onSubmit prop传递 */}                             
            
当前搜索地址: {searchValue || "未输入"}
 {/* 显示当前搜索值 */}        
        
                          {loading ? (                
Loading...
              ) : (                                  
Tokens
                  
                    {tokens.length > 0 ? tokens.map(token => (                       {/* 使用更稳定的key */}                                            )) : (                                            )}                  
                    
                      Name                      Price                      Hold                    
                    
                        @@##@@                           
{token.name}
                         		                         
${round(token.price, 10000000)}
 		                                                   
{round(token.balance / Math.pow(10, token.decimals), 10000000)}
                           
${round(token.valueUsd, 10000000)}
                        		                      
暂无代币数据，请尝试输入地址。
                        
       
  );}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应用至关重要。

{token.name

以上就是React组件通信：从子组件向父组件传递数据的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1529190.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

375.3K 文章
0 评论
1 粉丝
这个人很懒，什么都没有留下～
上一篇 2025年12月20日 20:54:21
下一篇 2025年12月20日 20:54:28

相关推荐

  • 提升React Web应用中Shadow DOM内部内容的可访问性 好文分享

    提升React Web应用中Shadow DOM内部内容的可访问性

    本文旨在解决在React Web应用中，当内容被注入到Shadow DOM内部时，如何确保其可访问性的问题。主要探讨了针对屏幕阅读器和浏览器内置内容阅读器的不同解决方案，包括动态添加标签元素和使用role=”alert”属性。通过示例代码和实践经验，帮助开发者克服Shadow…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 深入解析 JavaScript 数组：索引与命名属性的共存机制 好文分享

    深入解析 JavaScript 数组：索引与命名属性的共存机制

    javascript 数组本质上是特殊的对象，除了支持传统的数字索引元素外，也能像普通对象一样拥有字符串键的命名属性。这种特性常在控制台输出或库设计中体现，尤其用于兼顾向后兼容性与提供更具语义化的数据访问方式。本文将深入探讨这一机制，并通过示例代码演示其创建与访问方法，帮助开发者更好地理解和利用 j…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 解决 Django-Formset 按钮无响应问题：一步步教程 好文分享

    解决 Django-Formset 按钮无响应问题：一步步教程

    本文旨在解决在使用 Django-Formset 库时，按钮（如添加、提交等）无响应的问题。通过引入必要的 JavaScript 文件，使 Django-Formset 的内置函数生效，从而恢复按钮的正常功能。本文提供了一个简单的示例，并详细说明了如何在模板中正确引入所需的静态文件。 在使用 Dja…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 在 TypeScript 中使用 RequestInit 类型 好文分享

    在 TypeScript 中使用 RequestInit 类型

    本文旨在解决在 TypeScript 中使用 `fetch` 函数的 `RequestInit` 类型时遇到的问题。通过配置 `tsconfig.json` 和 ESLint，您可以正确地使用 `RequestInit` 类型，从而编写更类型安全和可维护的 `fetch` 相关代码。 在使用 Typ…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 在 React 中渲染 HTML Partial Response 的最佳实践 好文分享

    在 React 中渲染 HTML Partial Response 的最佳实践

    本文旨在解决在 React 应用中渲染从后端接口获取的 HTML 片段的问题。传统方式 dangerouslySetInnerHTML 虽然可以渲染 HTML，但无法处理内嵌的样式。本文将探讨使用 iframe 嵌入，以及数据解耦等更安全、更高效的解决方案，并提供代码示例和注意事项，帮助开发者在 R…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • JavaScript Canvas 2D上下文变换：实现图形旋转与整体视图控制 好文分享

    JavaScript Canvas 2D上下文变换：实现图形旋转与整体视图控制

    本教程详细讲解如何利用javascript canvas 2d上下文的变换功能，如translate、rotate、save和restore，实现页面元素的旋转与整体视图的灵活控制。通过改变绘图坐标系，开发者可以轻松地旋转图像、文本等内容，模拟“屏幕”旋转效果，为交互式web应用提供强大的视觉表现力…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • Mongoose模型中ObjectId数组的正确定义与保存实践 好文分享

    Mongoose模型中ObjectId数组的正确定义与保存实践

    本教程解决了mern应用中mongoose模型定义objectid数组时，用户id未能正确保存为null值的常见问题。通过分析错误模式，文章提供了`[mongoose.schema.types.objectid]`的正确声明方式，并结合api示例，确保关联的用户id能够准确持久化到mongodb数据…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • JavaScript中实现非阻塞“无限循环”的策略与实践 好文分享

    JavaScript中实现非阻塞“无限循环”的策略与实践

    在javascript中，传统的`while(true)`循环会阻塞主线程，导致浏览器界面冻结。为解决此问题，尤其在游戏开发或连续任务场景中，应采用异步机制实现非阻塞的“无限循环”。本文将详细介绍如何利用`settimeout`或`requestanimationframe`等api，创建既能持续运…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 使用纯JavaScript动态添加Bootstrap Toggle开关 好文分享

    使用纯JavaScript动态添加Bootstrap Toggle开关

    本教程详细介绍了如何利用纯javascript动态创建并初始化bootstrap toggle开关。文章将从引入必要库开始，逐步指导读者通过javascript创建`input`元素，设置其属性，将其添加到dom中，并最终使用jquery的`.bootstraptoggle()`方法将其转换为功能完…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • React 中使用事件监听器导致组件消失的解决方案 好文分享

    React 中使用事件监听器导致组件消失的解决方案

    本文旨在解决在 react 应用中添加事件监听器导致组件消失的问题。我们将探讨如何正确地使用 react 的状态管理和事件处理机制，避免直接操作 dom，从而实现组件的动态显示和隐藏。文章将提供详细的代码示例和解释，帮助开发者理解 react 的核心思想，并编写出更健壮和可维护的代码。 在 Reac…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 使用纯 JavaScript 动态添加 Bootstrap Toggle 开关 好文分享

    使用纯 JavaScript 动态添加 Bootstrap Toggle 开关

    本文详细介绍了如何利用纯 javascript 动态创建并初始化 bootstrap toggle 开关。通过创建 html `input` 元素，设置必要的 `data` 属性，并结合 jquery 的 `bootstraptoggle()` 方法，可以实现页面上实时添加功能完善的 bootstr…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • Remix Session 跨页面持久化问题解决方案 好文分享

    Remix Session 跨页面持久化问题解决方案

    本文旨在解决Remix应用中Session数据无法跨页面持久化的问题。通过分析Session Cookie的配置，特别是`secure`属性，解释了本地开发环境下Session丢失的原因，并提供了相应的解决方案，确保Session数据在不同页面间正确传递。 在使用 Remix 开发 Web 应用时，…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 解决React JSX列表渲染：forEach陷阱与map的正确姿态 好文分享

    解决React JSX列表渲染：forEach陷阱与map的正确姿态

    在react jsx中，渲染动态列表时，使用`foreach`而非`map`是常见错误。`foreach`仅用于副作用，不返回可渲染的jsx元素。本文将详细解释`map`与`foreach`在react列表渲染中的根本区别，并提供处理嵌套数据结构的正确`map`实现，确保组件能够按预期展示内容。 理…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 使用useReducer高效管理React中嵌套对象数组的状态 好文分享

    使用useReducer高效管理React中嵌套对象数组的状态

    本文旨在探讨在react应用中如何高效更新嵌套在对象内部的数组（包含多个对象）的状态。我们将介绍`usereducer` hook作为管理复杂状态逻辑的强大工具，并提出将数组数据结构优化为map的策略，以提高数据读写效率，从而简化状态更新操作。 在React开发中，管理组件状态是核心任务之一。当状态…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • JavaScript中的箭头函数与普通函数有哪些关键区别？ 好文分享

    JavaScript中的箭头函数与普通函数有哪些关键区别？

    箭头函数继承外层this，普通函数由调用方式决定this；2. 箭头函数不能作为构造函数，普通函数可以；3. 箭头函数无arguments对象，需用…args替代；4. 箭头函数语法更简洁，适合单行表达式和回调场景。 箭头函数和普通函数在JavaScript中有几个关键区别，理解这些差异…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 如何利用JavaScript实现前端数据的加密与安全传输？ 好文分享

    如何利用JavaScript实现前端数据的加密与安全传输？

    前端加密需基于HTTPS，利用Web Crypto API对敏感数据加密，结合动态密钥管理和签名机制，提升传输安全性，但不能替代后端校验。 前端数据加密与安全传输的核心在于防止敏感信息在传输过程中被窃取或篡改。虽然JavaScript运行在客户端，存在代码暴露的风险，但通过合理使用现代Web API…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 解决 MongoDB 数据库用户保存失败问题：Bcrypt 加密后的正确处理方式 好文分享

    解决 MongoDB 数据库用户保存失败问题：Bcrypt 加密后的正确处理方式

    本文旨在解决在使用 bcrypt 加密密码后，用户数据无法成功保存到 MongoDB 数据库的问题。通过分析常见错误原因，提供使用 Promise 链的解决方案，详细阐述了如何正确处理异步操作，确保数据安全有效地存储到数据库中，并提供代码示例和注意事项，帮助开发者避免类似问题。 在使用 Node.j…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 动态生成与填充表单输入控件：基于HTML模板和jQuery的实现 好文分享

    动态生成与填充表单输入控件：基于HTML模板和jQuery的实现

    本教程详细阐述了如何利用html “ 标签和jquery动态生成表单输入控件，并填充其值。文章将重点介绍正确克隆模板内容、定位输入元素、设置其属性以及管理外部依赖的方法，旨在提供一套清晰、专业的解决方案，以应对在web应用中需要重复创建和管理表单字段的场景。 引言 在现代Web开发中，经…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 使用JavaScript选择性替换HTML页面中的文本内容 好文分享

    使用JavaScript选择性替换HTML页面中的文本内容

    本教程详细介绍了如何使用javascript遍历html文档，并选择性地将仅包含文本内容的元素（叶子节点）的文本替换为指定字符，同时保留包含其他html子元素的结构。通过dom操作和节点类型判断，实现精确的文本内容替换，适用于需要批量匿名化或标准化页面文本的场景。 在Web开发中，有时我们需要对HT…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • JavaScript中的代理模式如何实现对象访问控制？ 好文分享

    JavaScript中的代理模式如何实现对象访问控制？

    Proxy通过拦截对象操作实现访问控制，如限制敏感属性访问、数据验证等，示例中禁止读取password及过滤私有属性，实现权限管理与数据保护。 JavaScript中的代理模式通过Proxy构造函数实现对象访问控制，可以在不修改原对象的前提下，增强或限制其行为。核心在于拦截对象的常见操作，比如读取、…

    程序猿的头像 程序猿
    2025年12月20日
    000

发表回复

登录后才能评论
关注微信