父组件:


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-shell设置代理

    Configure Git to use a proxy ##In Brief You may need to configure a proxy server if you're having tr ...

  2. 【前端】HTML基础

    前端 HTML:一个人 CSS:这个人的衣服 JS:这个人的行为 1 head标签 head相关标签 <!--html5--> <!DOCTYPE html> <html ...

  3. python连接数据库自动发邮件

    python连接数据库实现自动发邮件 1.运行环境 redhat6 + python3.6 + crontab + Oracle客户端 2.用到的模块  3.操作步骤 (1)安装python3.6参考 ...

  4. 【NOIP2013模拟联考6】选课

    题目 你真的认为选课是那么容易的事吗?HYSBZ的ZY同志告诉你,原来选课也会让人产生一种想要回到火星的感觉.假设你的一周有n天,那么ZY编写的选课系统就会给你n堂课.但是该系统不允许在星期i和星期i ...

  5. js基础复习~Array对象

    Array对象 lenght 获取到数组的长度 concat() 方法用于合并两个或多个数组.此方法不会更改两大有数组,而是返回一个新的数组 let arr1 = ["a",&qu ...

  6. react native 之 redux 使用套路

    redux是什么?他是一个state容器 redux的运作方式是怎样的? 接入方式: 1. npm install 下列内容: npm install --save redux npm install ...

  7. js解决手机键盘影响定位的问题

    // 滑动其他地方隐藏软键盘document.body.addEventListener('touchend', function(evt) { document.activeElement.blur ...

  8. 特征提取算法(3)——SIFT特征提取算子

    目录: 前言 1.高斯尺度空间GSS 2.高斯差分DOG 用DoG检测特征点 GSS尺度选择 3.图像金字塔建立 用前一个octave中的倒数第三幅图像生成下一octave中的第一幅图像 每层octa ...

  9. VMware 15 安装 macOS 10.14优质教程链接集合

    https://www.jianshu.com/p/25d2d781bd98 https://mp.weixin.qq.com/s/91Qc7L7E0xbVYXUcReUb_w https://blo ...

  10. 浅谈IPv4至IPv6演进的实施路径

    作者:个推运维平台网络工程师 宗堂   1 业务背景 在互联网呈现爆炸式发展的今天, IPv4网络地址数量匮乏等问题将会影响到我国的互联网发展与应用,制约物联网.5G等新业务开展.今年4月国家工信部发 ...