react父子组件通信案例

父组件:App组件
子组件:Search组件、List组件

案例需求:文本框中输入关键词,点击搜索按钮后,下方列表展示出搜索结果

实现思路:

  1. 子组件Search组件父组件App传递状态(状态包括:是否为第一次打开页面isFirst、是否处于加载中isLoading、搜索出来的列表结果users、请求相关的错误信息err)
    解决方案:想要实现子向父传递状态,可以采取父向子传递一个方法,然后子中通过this.props.updateAppState({状态名: “状态值”})的方式来实现
  2. 子组件List拿到父组件App中的状态,通过this.props.状态名
    在这里插入图片描述
    App组件:
import React, {Component} from 'react'
import Search from "./components/Search";
import List from "./components/List";
import './App.css';
export default class App extends Component {state = {// 初始化状态users: [], // users初始值为数组isFirst: true, // 是否为第一次打开页面isLoading: false, // 标识是否处于加载中err: '' // 存储请求相关的错误信息}// 更新App的stateupdateAppState = (stateObj) => {this.setState(stateObj)}render() {return (<div className="container"><Search updateAppState={this.updateAppState} /><List {...this.state}  /></div>)}
}/*function App() {return (<div><Index /></div>);
}*/

Search组件:

import React, {Component} from 'react';
import axios from "axios";class Search extends Component {search = () => {// 获取用户的输入(连续解构赋值+重命名)const {keyWordElement: {value: keyword}} = this// 发送请求前通知App更新状态this.props.updateAppState({isFirst: false, isLoading: true})// console.log(keyword)// 发送网络请求axios.get(`https://api.github.com/search/users?q=${keyword}`).then((response) => {// console.log('成功了', response.data)// 请求成功后通知App更新状态this.props.updateAppState({isLoading: false, users: response.data.items})},(error) => {// console.log('失败了', error)this.props.updateAppState({isLoading: false, err: error.message})})}render() {return (<section className="jumbotron" style={{textAlign: "center"}}><h3 className="jumbotron-heading">搜索github用户</h3><div><input ref={c => this.keyWordElement = c} type="text" placeholder="输入关键词点击搜索"/>&nbsp;<button onClick={this.search}>搜索</button></div></section>);}
}export default Search;

List组件:

import React, {Component} from 'react';
import './index.css'class List extends Component {render() {const {users, isFirst, isLoading, err} = this.propsreturn (<div className="row">{isFirst ? <h2>欢迎使用,输入关键字,随后点击搜索</h2> :isLoading ? <h2>Loading...</h2> :err ? <h2 style={{color: 'red'}}>{err}</h2> :users.map((userObj) => {return (<div className="card" key={userObj.id}><a href={userObj.html_url} rel="noreferrer" target="_blank"><img alt="avatar" src={userObj.avatar_url} style={{width: '100px'}}/></a><p className="card-text">{userObj.login}</p></div>)})}</div>);}
}export default List;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/470300.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

模块与包(8)

第8章 复杂程序组织模块&#xff1a;包含函数或者类的Python程序导入模块形式&#xff1a;import 模块名import 模块名 as 新名字 from 模块名 import 函数名from 模块名 import * #导入模块中的所有代码使用import和from导入&#xff0c;调用函数的不同&#xff1a;使…

matlab画线不同颜色_怎样画线框图才有意义

我们常轻忽身边习以为常的事物&#xff0c;觉得没有必要为一些看似简单又可有可无的东西浪费时间——例如线框图。虽然没必要凡事都寻根问底&#xff0c;但当面对复杂问题时&#xff0c;脚踏实地回归基本面也许才是根本解法。本文章深入介绍程序开发界面设计中&#xff0c;最简…

react 消息订阅-发布机制(解决兄弟组件通信问题)

消息订阅-发布机制 工具库: PubSubJS下载: npm install pubsub-js --save使用: 1)import PubSub from ‘pubsub-js’ //引入 2)PubSub.subscribe(‘delete’, function(data){ }); //订阅 3)PubSub.publish(‘delete’, data) //发布消息 App组件&#xff1a; import React,…

运行Myeclipse发生这事这是怎么回事,大神们

转载于:https://www.cnblogs.com/zhuh102/p/5753616.html

非零返回怎么解决_VLOOKUP如何返回多个值?

今天我来谈谈大家最熟悉的函数&#xff0c;也是使用频率最高的函数&#xff0c;基本是每天都在使用-VLOOKUP大家都知道VLOOKUP可以根据条件&#xff0c;查找并返回满足条件对应列的值&#xff0c;但是他的设定只是只能返回第一个满足条件的值如果我们要返回满足条件的多个值&am…

Fetch发送网络请求

1. 文档 https://github.github.io/fetch/https://segmentfault.com/a/1190000003810652 2. 特点 fetch: 原生函数&#xff0c;不再使用XmlHttpRequest对象提交ajax请求老版本浏览器可能不支持 3. 相关API GET请求 fetch(url).then(function(response) {return response.…

JSX详解React的事件绑定事件参数的传递

一、认识JSX 这段element变量的声明右侧赋值的标签语法是什么呢&#xff1f; 它不是一段字符串&#xff08;因为没有使用引号包裹&#xff09;&#xff0c;它看起来是一段HTML原生&#xff0c;但是我们能在js中直接给一个变量赋值html吗&#xff1f;其实是不可以的&#xff0c…

剑指Offer 从尾到头打印链表

题目描述 输入一个链表&#xff0c;从尾到头打印链表每个节点的值。 输入描述: 输入为链表的表头 输出描述: 输出为需要打印的“新链表”的表头 思路&#xff1a; 用容器vector&#xff0c;递归到最后一个元素&#xff0c;push_back到dev中。 AC代码&#xff1a; 1 /**2 * str…

python排序元组两个元素_在python中对具有3个元素的元组列表进行排...

只需对列表进行排序&#xff1b;默认排序功能可以满足您的需求.比较两个元组时,将根据它们的内容对其进行排序&#xff1b;首先对第一个元素进行排序,如果相等,则对第二个元素进行排序,依此类推.演示&#xff1a;>>> L [(14, 2, 3), (1, 14, 0), (14, 1, 1), (1, 14,…

叠积木

【题目描述】 约翰和贝西在叠积木。共有30000块积木&#xff0c;编号为1到30000。一开始&#xff0c;这些积木放在地上&#xff0c;自然地分成N堆。贝西接受约翰的指示&#xff0c;把一些积木叠在另一些积木的上面。一旦两块积木相叠&#xff0c; 彼此就再也不会分开了&#xf…

总谐波失真计算公式_新能源汽车技术|车用轮毂电机转矩谐波协同控制策略

点击 电机与控制应用 关注我们轮毂电机因结构简单、驱动灵活的特点广泛应用于轻型电动车辆。电机运行中存在的齿槽效应、逆变器非线性效应及电流谐波等问题&#xff0c;导致电机电磁转矩波动&#xff0c;影响车辆运行的平顺性。通过电磁转矩谐波分析发现其主要成分为低阶谐波。…

React条件渲染列表渲染

一、React条件渲染 某些情况下&#xff0c;界面的内容会根据不同的情况显示不同的内容&#xff0c;或者决定是否渲染某部分内容&#xff1a; 在vue中&#xff0c;我们会通过指令来控制&#xff1a;比如v-if、v-show&#xff1b;在React中&#xff0c;所有的条件判断都和普通的J…

解决VirtualBox错误:“FATAL:No bootable medium found!”

VirtualBox错误&#xff1a;“FATAL&#xff1a;No bootable medium found!”  用VirtualBox安装系统出现这个错误的几率极高&#xff0c;因为当哥出现同样问题的时候股沟了下”FATAL&#xff1a;No bootable medium found!“出现很多内容&#xff0c;但没一个把问题解决了的…

React事件总线

通过Context主要实现的是数据的共享&#xff0c;但是在开发中如果有跨组件之间的事件传递&#xff0c;应该如何操作呢&#xff1f; 一、安装events 在Vue中我们可以通过Vue的实例&#xff0c;快速实现一个事件总线&#xff08;EventBus&#xff09;&#xff0c;来完成操作&…

字符串最长公共子序列python_求解两个字符串的最长公共子序列

一&#xff0c;问题描述给定两个字符串&#xff0c;求解这两个字符串的最长公共子序列(Longest Common Sequence)。比如字符串1&#xff1a;BDCABA&#xff1b;字符串2&#xff1a;ABCBDAB则这两个字符串的最长公共子序列长度为4&#xff0c;最长公共子序列是&#xff1a;BCBA二…

React中使用ref

一、如何使用ref 在React的开发模式中&#xff0c;通常情况下不需要、也不建议直接操作DOM原生&#xff0c;但是某些特殊的情况&#xff0c;确实需要获取到DOM进行某些操作&#xff1a; 管理焦点&#xff0c;文本选择或媒体播放&#xff1b;触发强制动画&#xff1b;集成第三方…

python合并word表格单元格_python docx模块读取word表格遇到合并单元格时的处理

python docx模块读取word表格遇到合并单元格时的处理python docx模块读取word表格遇到合并单元格时的处理python docx模块读取word表 遇到合并单元格时的处理通过docx模块&#xff0c;读取word里面表格&#xff0c;并进行修改。现在我遇到的表格是这样&#xff1a;里面行&#…

React中的受控组件和非受控组件

一、认识受控组件 在React中&#xff0c;HTML表单的处理方式和普通的DOM元素不太一样&#xff1a;表单元素通常会保存在一些内部的state。 比如下面的HTML表单元素&#xff1a; 这个处理方式是DOM默认处理HTML表单的行为&#xff0c;在用户点击提交时会提交到某个服务器中&…

关于div居中

margin : 100px; margin-left: auto; margin-right: auto; 这样子设置css样式就可以实现一个div居中转载于:https://www.cnblogs.com/jiangjing/p/5764820.html

JavaScrip入门-变量计算%函数

哈 <html> <body> <script>var hello"Hello ";hellohello" world!";var age1161;var age220var ottrue; document.write(helloage1);<!--Hello world!17 因为中间空两行 -->document.write(age1age2);//falsedocument.write(age1 …