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属 ...
随机推荐
- Docker 的安装与使用
账号:xcj26密码:X*c*j*5**6**邮箱:**j26@126.com 账号:xichji密码:X*c*j*5**6**邮箱:45*666***@qq.com 摘自:https://b ...
- C++入门经典-例3.18-使用for循环计算从1到10的累加
1:代码如下: // 3.18.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> usin ...
- echarts折线图,纵坐标数值显示不准确的问题解决
问题如图: 问题解决:将stack去掉或注释 如下图:
- 非均匀B样条离散点的加密与平滑
非均匀B样条离散点的加密与平滑 离散点的预处理是点云网格化很关键的一步,主要就是离散点的平滑.孔洞修补:本文是基于非均匀B样条基函数进行离散点云的加密和平滑的,一下为初步实现结果. 算法步骤: 1.数 ...
- DeepFaceLab:视频中有多人,仅替换特定人脸的方法!
DeepFaceLab自带的视频素材,一个是钢铁侠托尼斯塔克,一个是变形金刚男主角山姆.每一个视频中只有一个人.所以当你第一次玩的时候很顺畅,什么都不用管,一步一步按教程来就好好了. 直到有一天你 ...
- 六、Java中一个key存多个value的MultiValueMap,一键多值
一.MultiValueMap介绍,与map,HashMap相差不多 添加一个Key对应一个Value的:void add(K, V); 添加一个Key对应多个Value的:void add(K, L ...
- 【剑指offer38】字符串的排列
如果没有要求字典序排序,则直接采用递归的思想,将字符串的排列看成两步,第一步,交换第一个字母和任意一个字母(包括自己,但不包括和自己相等的其他字母)固定第一个字母,固定第一个字母,然后对后面的字符串也 ...
- 建立WIN32 DLL,并使用静态加载和动态加载
新建工程,选择win32 dll 编写.cpp(或.c) MyDll.cpp #include "windows.h" BOOL APIENTRY DllMain(HANDLE h ...
- Error-ASP.NET:在从服务器接收结果时发生传输级错误。 (provider: Session Provider, error: 19 - 物理连接不可用)
ylbtech-Error-ASP.NET:在从服务器接收结果时发生传输级错误. (provider: Session Provider, error: 19 - 物理连接不可用) 1.返回顶部 1 ...
- 利用开源SlidingMenu框架实现左右侧滑菜单的功能
package com.loaderman.slidingmenudemo; import android.os.Bundle; import android.support.v4.app.Fragm ...