react中父组件给子组件传值
子组件
- state = {
- msg: 'a'
- }
- render(){
- return<h1>{this.state.msg}</h1>
- }
- setInfo = (val)=>{
- //这里的val就是父组件通过调用这个方法,传的参数,在这里val的值为aaa
- this.setState({
- msg: val
- })
- }
父组件
- render(){
- return <div><Test ref="myTest">
- <button onClick={()=>this.show()}/>
- </div>
- }
- show = ()=>{
- this.refs.myTest.setInfo('aaa')
- }
- 注意:在这里父组件通过点击按钮调用show方法,进而调用子组件中的一个setInfo方法,通过传参,而修改了子组件的的msg值。切记: 在react中如果要修改数据的话一定要使用setState()方法才可以。
本文链接:https://blog.csdn.net/zsm4623/article/details/86594275
react中父组件给子组件传值的更多相关文章
- artdialog4.1.7 中父页面给子页面传值
artdialog4.1.7中父页面给子页面传值时看了一些网友的解决方法: 在父页面声明全局变量 var returnValue=“ ”,子页面用art.dialog.opener.returnVal ...
- layer.open中父页面向子页面传值
1.咱先看图说话 父list.jsp 子operate.jsp实现的代码1 在父页面上完成对子页面的数据渲染 function setData(data) { var lay=layer.open({ ...
- vue中父级与子组件生命周期的先后顺序
1.vue的生命周期 2.views/createrCustormer.vue为父级 <template> <expressService /> </ ...
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
- react学习-react父组件给子组件传值与设置传值类型以及是否必传参数
react 父组件给子组件传参时,父组件直接在引入的子组件内写入要传递的参数即可 <HeaderComponent title={"传递的参数"}></Heade ...
- React中父组件与子组件之间的数据传递和标准化的思考
React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...
- Vue中父组件向子组件传值
Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue中的父组件给子组件传值
父子组件传值: 父组件在调用子组件的地方,添加一个自定义的属性,属性的值就是你要传递给子组件的数据,如果值是一个变量,那么需要使用到绑定属性: 在子组件定义的地方,添加一个props选项,值为一个数组 ...
- VUe.js 父组件向子组件中传值及方法
父组件向子组件中传值 1. Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系. 2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以 ...
- Vue中,父组件向子组件传值
1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...
随机推荐
- HBase2.0新特性解析
作者 | 个推大数据运维工程师 行者 升级背景 个推作为专业的数据智能服务商,在业务开展过程中存在海量的数据存储与查询的需求,为此个推选用了高可靠.高性能.面向列.可伸缩的分布式数据存储系统--HBa ...
- 关于Java 8 forEach
1. forEach and Map 1.1 通常这样遍历一个Map Map<String, Integer> items = new HashMap<>(); items.p ...
- Apache配置转发
第一种: LoadModule proxy_module modules/mod_proxy.so LoadModule proxy_http_module modules/mod_proxy_htt ...
- 11、kubernetes之dashboard
一.准备dashboard使用的证书 # cd /etc/kubernetes/pki/ pki]# (umask 077; openssl genrsa -out dashboard.key 204 ...
- 搭建jenkins集群node结点
配置结点 首先,需要在jenkins的系统设置中新增一个结点 系统管理 -> 节点管理 -> New Node 配置Remote root directory最好和主jenkins的路径一 ...
- 用xmmp+openfire+smack搭建简易IM实现
功能实现:注册,登录,单聊表情,文本,图片,语音的发送接收,添加好友,删除好友,查找好友,修改密码,消息提醒设置,获取离线消息等功能 1.前期准备 1.下载opnefire软件:https://www ...
- sklearn.feature_extraction.DictVectorizer
sklearn.feature_extraction.DictVectorizer:将字典组成的列表转换成向量.(将特征与值的映射字典组成的列表转换成向量) 1. 特征矩阵行代表数据,列代表特征,0表 ...
- OpenvSwitch/OpenFlow 架构解析与实践案例
目录 文章目录 目录 前言 软件定义网络(SDN) 虚拟交换机(vSwitch) 为什么说云计算时代的 SDN 非常重要 OpenFlow 简介 Open vSwitch Open vSwitch 的 ...
- OpenStack RPM Sample 解析
目录 文章目录 目录 前言 RPM 打包环境安装 RPM 打包流程 OpenStack RPM SPEC Sample RPM 升级/回退 前言 软件功能升级,尤其是 Python 这类解析型语言的软 ...
- navicat 系列软件一点击菜单栏就闪退
现象:安装多个版本都出现了闪退的现象 解决方案:后来发现,原来是启动了有道词典屏幕取词才会出现这种现象,关了有道就没事.