父组件:


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. 设计模式Design Pattern(3) -- 责任链模式

    什么是责任链模式? 责任链模式(Chain of Responsibility Pattern):请求知道公开接口,但不知道那个具体类处理,这些具体处理类对象连接成一条链.请求沿着这条链传递,直到有对 ...

  2. IIS6、IIS7.5设置网站默认首页方法(Directory Listing Denied)

    这篇文章主要介绍了IIS6.IIS7.5设置网站默认首页方法,如果不设置访问目录就会提示Directory Listing Denied,就是不允许列出文档,为了安全网站都会设置不设置默认,需要的朋友 ...

  3. 前端HTTP缓存

    Web 缓存大致可以分为:数据库缓存.服务器端缓存(代理服务器缓存.CDN 缓存).浏览器缓存.其中前端比较关心的是浏览器缓存,包括今天要说的HTTP缓存和前面说过的cookie.localStora ...

  4. 51nod1584加权约数和

    题目大意: 求: \[ \sum_{i-1}^n\sum_{j=1}^nmax(i,j)\sigma(i*j) \] 题解 对于这个\(\max\),套路的把它转化成: \[ 2*\sum_{i=1} ...

  5. Windows 搭建Hadoop 2.7.3开发环境

    1.安装配置Java环境 1.1.安装Windows版本的jkd应用程序 当前的系统环境是64位Windows 7,因此下载64位JDK,下载地址:http://download.oracle.com ...

  6. es的索引库模板

    在实际的生产中,如果要插入大批量数据的时候需要使用多个索引库,如果我们还是手工指定每个索引的配置信息settings和mappings,是非常耗时的: 针对这种情况,es有index template ...

  7. 微信小程序之登录用户不是该小程序的开发者

    当uniapp项目转为小程序项目的时候,预览会显示“您不是登录用户...”,所以没有办法发布,这个时候打开“project.config.json”设置一下appid,与你公众号appid一致就可以

  8. 微信小程序 button 组件

    button 组件 拥有强大的功能 自身可以拥有很多跟微信风格的样式,且是 表单 和 开放的能力 重要的 按钮 button 的属性: size: 类型 字符串 按钮的大小 属性值:default 默 ...

  9. leetcode-mid-array-73 set matrix zeros

    mycode 空间复杂度 m+n 思路:用set把为0元素所在行.列记录下来 注意:注释的方法更快 class Solution(object): def setZeroes(self, matrix ...

  10. mysqldump常用使用

    1:导出数据库sakila的表结构mysqldump -uroot -ppwd -d sakila > /data/tmp/sakila.sql; 2:导出数据库sakila下表employee ...