父组件:


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父子组件间的传值的更多相关文章

  1. vue组件定义方式,vue父子组件间的传值

    vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

  2. Vue—非父子组件间的传值(Bus/发布订阅模式/观察者模式/总线)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue bus方式解决非父子组件间的传值

    对于非父子组件之间的传值 通常使用VUEX 和总线等方式解决 这里我聊聊发布订阅模式(总线) <body> <div class="app"> <ch ...

  4. 五、react中父子组件间如何传值

    1.父组件向子组件传递数据:父组件绑定属性值传给子组件,子组件通过this.props()接受. 2.子组件向父组件传递数据:子组件绑定一个方法,方法中通过this.props.父组件方法名(参数)传 ...

  5. 【vue】父子组件间通信----传值

    官方文档参考 (一)父组件 向 子组件 传值 ①在父组件中调用子组件处,绑定要传的数据data1, 如 <nav  :data1=" "  ></nav> ...

  6. react组件间的传值方法

    关于react的几个网站: http://react.css88.com/ 小书:http://huziketang.mangojuice.top/books/react/ http://www.re ...

  7. React中父子组件间的通信问题

    1.https://blog.csdn.net/sinat_17775997/article/details/59103173 (React中父子组件间的通信问题)

  8. React独立组件间通信联动

    React是现在主流的高效的前端框架,其官方文档 http://reactjs.cn/react/docs/getting-started.html 在介绍组件间通信时只给出了父子组件间通信的方法,而 ...

  9. 第四节:Vue表单标签和组件的基本用法,父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

随机推荐

  1. 洛谷P4003 [国家集训队2017]无限之环 网络流 最小费用最大流

    题意简述 有一个\(n\times m\)棋盘,棋盘上每个格子上有一个水管.水管共有\(16\)种,用一个\(4\)位二进制数来表示当前水管向上.右.下.左有个接口.你可以旋转除了\((0101)_2 ...

  2. pymongo操作mongo数据库的查操作

    一:  数据结构 { "_id" : ObjectId("5de8a5b748a75a8d48b72bdc"), ", ", ", ...

  3. pyqt5-橡皮筋控件QRubberBand

    提供一个矩形或线来指示选择或边界 一般结合鼠标事件一同协作 继承于 QWidget import sys from PyQt5.QtWidgets import QApplication, QWidg ...

  4. 大数阶乘(N! Plus)问题

    解题思路 将正整数N从1到N逐位相乘,即1 * 2 * 3...... * (N-1) * N.每次相乘后的值会存储到array[]中,其中一个数组元素存储值中的一位数.当值小于10时直接存储,值大于 ...

  5. Angular前端开源框架

    1.  项目框架介绍 本项目采用了开源项目ngx-admin作为脚手架.基于Angular 8 +,Bootstrap 4+和Nebular,ngx-admin是最受欢迎的后台管理模板,是用于个人和商 ...

  6. 6364. 【NOIP2019模拟2019.9.20】养马

    题目描述 题解 一种显然的水法:max(0,-(点权-边权之和*2)) 这样会挂是因为在中途体力值可能会更小,所以考虑求走完每棵子树所需的至少体力值 考虑从子树往上推求出当前点的答案 设每棵子树从根往 ...

  7. 跳转控制语句continue

    1 continue的使用场景: 1.1 在循环语句中 注意:离开使用场景的存在是没有意义的 2 continue的作用: 2.1 单层循环对比break,然后总结两者的区别 2.1.1 break ...

  8. 官方文档翻译-Today

    原文链接: Today 最后更新:2017-02-18 译文: 应用的今日视图扩展被称作小部件.小部件为用户提供快速访问重要信息的入口.例如,用户打开今日视图实时查看股票价格或天气情况,查看今天的日程 ...

  9. MongoDB学习【二】—MongoDB基础和数据类型

    一.MongoDB基础知识 在MongoDB中相关术语的解释和sql术语对应关系 SQL术语/概念 MongoDB术语/概念 解释/说明 database database 数据库 table col ...

  10. 20160419—JS备忘:服务器回发刷新页面提示重试的解决方案。

    有事页面刷新时 提示如下: js使用的是:location.reload()的刷新方式. 使用js重新定向该页面:location.href="a.aspx"; 当使用:self. ...