父组件:


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. Git之仓库管理

    介绍以及安装: Git 是一个开源的分布式版本控制软件,用以有效.高速的处理从很小到非常大的项目版本管理. Git 最初是由Linus Torvalds设计开发的,用于管理Linux内核开发.Git ...

  2. javascript 通用定义

    通用约定 注释 原则 As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性.可读性. As long as necessary(如有必要,尽量详尽):合理的注释.空 ...

  3. IDEA将新建项目上传至GitLab

    1.首先,需要你自己登录GitLab,并新建一个项目的链接,如下图所示: (此图为图三,该链接下面操作中将会用到!) 2.在idea上新建一个项目,完成之后,需要创建一个git仓库: 3.然后可以根据 ...

  4. sublime格式化

    https://nodejs.org/dist/v6.2.0/node-v6.2.0-x64.msi sublime格式化

  5. Oracle Or子句

    Oracle Or子句 作者:初生不惑 Oracle基础 评论:0 条 Oracle技术QQ群:175248146 在本教程中,我们来学习如何使用Oracle OR运算符来组合两个或更多的布尔表达式. ...

  6. iOS-7-Cookbook

    https://github.com/liubin1777/iOS-7-Cookbook 版权声明:本文为博主原创文章,未经博主允许不得转载.

  7. Scrapy 学习笔记爬豆瓣 250

    Scrapy 是比较上层的库,基于中间层开发,它基于高层,所以它依赖许多其它库.事件驱动的异步技术. Scrapy 爬取网页,以豆瓣电影 Top 250 为例子. 首先打开命令提示符,输入.scrap ...

  8. MacOS X 安装OpenCV3.2

    windows平台和linux平台安装参见 官方文档:http://docs.opencv.org/3.2.0/da/df6/tutorial_py_table_of_contents_setup.h ...

  9. yield(放弃、谦逊、礼让) - 瞬时的,暂时放了马上再抢

    两个线程抢占CPU各自执行任务,代码如下: public class Demo03 { public static void main(String[] args) throws Interrupte ...

  10. RAM: Residual Attention Module for Single Image Super-Resolution

    1. 摘要 注意力机制是深度神经网络的一个设计趋势,其在各种计算机视觉任务中都表现突出.但是,应用到图像超分辨领域的注意力模型大都没有考虑超分辨和其它高层计算机视觉问题的天然不同. 作者提出了一个新的 ...