React父子组件间的传值
父组件:
import React, { Component } from 'react';
import Child from './chlid';
class parent extends Component{
constructor(props) {
super(props);
this.state = {
txt0:"默认值0",
txt1:"默认值1"
}
}
componentDidMount(){
}
parToson(){
this.setState({
txt0:"哈哈哈哈"
})
}
sonToPar(e){
this.setState({
txt1:e
})
}
render(){
const style={
paddingLeft:"150px"
}
return(
<div style={style}>
<button onClick={this.parToson.bind(this)}>传值给子组件</button>
<div>接受子组件的传值为:{this.state.txt1}</div>
<br/>
<Child message={this.state.txt0} getsonToPar={this.sonToPar.bind(this)}/>
</div>
)
}
}
子组件:
import React, { Component } from 'react';
class child extends Component{
constructor(props) {
super(props);
this.state = {
msg:"啦啦啦啦"
}
}
componentDidMount(){
}
render(){
return(
<div>
<div>接受父组件传的值为:{this.props.message}</div>
<button onClick={()=>this.props.getsonToPar(this.state.msg)}>传值给父组件</button>
</div>
)
}
}
export default child;
github:https://github.com/Rossy11/re...
来源:https://segmentfault.com/a/1190000016992970
React父子组件间的传值的更多相关文章
- vue组件定义方式,vue父子组件间的传值
vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
- Vue—非父子组件间的传值(Bus/发布订阅模式/观察者模式/总线)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue bus方式解决非父子组件间的传值
对于非父子组件之间的传值 通常使用VUEX 和总线等方式解决 这里我聊聊发布订阅模式(总线) <body> <div class="app"> <ch ...
- 五、react中父子组件间如何传值
1.父组件向子组件传递数据:父组件绑定属性值传给子组件,子组件通过this.props()接受. 2.子组件向父组件传递数据:子组件绑定一个方法,方法中通过this.props.父组件方法名(参数)传 ...
- 【vue】父子组件间通信----传值
官方文档参考 (一)父组件 向 子组件 传值 ①在父组件中调用子组件处,绑定要传的数据data1, 如 <nav :data1=" " ></nav> ...
- react组件间的传值方法
关于react的几个网站: http://react.css88.com/ 小书:http://huziketang.mangojuice.top/books/react/ http://www.re ...
- React中父子组件间的通信问题
1.https://blog.csdn.net/sinat_17775997/article/details/59103173 (React中父子组件间的通信问题)
- React独立组件间通信联动
React是现在主流的高效的前端框架,其官方文档 http://reactjs.cn/react/docs/getting-started.html 在介绍组件间通信时只给出了父子组件间通信的方法,而 ...
- 第四节:Vue表单标签和组件的基本用法,父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
随机推荐
- LOJ#2330 榕树之心 树形dp
瞎扯 这个题和\(\mathsf{ISIJ2019 Au}\)神仙学弟\(\mathsf{\color{red}c}\mathsf{hangruinian2020}\)争辩了半个多小时. 概括一下就是 ...
- 【leetcode】493. Reverse Pairs
题目如下: 解题思路:本题要求的是数组每个元素和所有排在这个元素后面的元素的值的二倍做比较.我们可以先把数组所有元素的二倍都算出来,存入一个新的数组newlist,并按升序排好.而后遍历nums数组的 ...
- 奇偶选择器:使用odd和even属性实现表格单双行颜色相间和不同
一.奇偶选择器 表格在呈现数据的时候我们为了方便观看,而隔行显示不同的颜色,虽然可以用用类选择器 class实现这种效果,但是未免太过麻烦,为了更加简便地表现这种特殊的效果我们需要用到一种特殊的选择器 ...
- DI,依赖注入,给对象赋值 ,get,set
DI,依赖注入,给对象赋值 ,get,set给对象赋值 2种方式:1.get.set默认无参构造方法给对象赋值 2.xml中有参构造器方法给对象赋值
- rk3288-cc上编写一个hello world
一.编写一个hello world驱动 懒,不写了 二.编写Kconfig和Makefile 我们在kernel/driver目录下创建一个hello目录 然后创建一个Kconfig文件: confi ...
- C/C++头文件的编写
在C语言的学习过程中,我们一般把所有的代码写在一个文件中.随着自身水平的提高,我们发现代码越写越长,代码行数越来越多,把一个工程的所有代码写在一个文件中让人看起开非常吃力.于是我们开始想把代码中的函数 ...
- 170826-关于spring的知识点及练习
1.Spring作用: 1.生态体系庞大,全能型选手![springmvc是其一个子模块,jdbcTemplate能直接操作数据库!] 2.将其他组件粘合在一起 3.IOC容器和AOP[Aspect ...
- Vim 编辑器学习笔记
参考资料: 世界上最牛的编辑器: Vim 1
- 8 Django 模型层(2)
知识预览 多表操作 创建模型 实例:我们来假定下面这些概念,字段和关系 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息.作者详情模型和作者模型 ...
- (转)JNI参数传递|Surface && sign签名对应
http://blog.csdn.net/stefzeus/article/details/6622011 char* Get_Surface(JNIEnv *env, jclass cls, job ...