父组件:


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. 【02】Python 字符串、列表、元组、字典

    1 列表 list就是一种采用分离式技术实现的动态顺序表(tuple也一样): 在建立空表(或者很小的表)时,系统分配一块能容纳8个元素的存储区: 在执行插入操作(insert或append)时,如果 ...

  2. hihocode 1584 : Bounce (找规律)(2017 北京网络赛G)

    题目链接 比赛时随便找了个规律,然后队友过了.不过那个规律具体细节还挺烦的.刚刚偶然看到Q巨在群里提到的他的一个思路,妙啊,很好理解,而且公式写起来也容易.OrzQ巨 #include<bits ...

  3. 【leetcode】1123. Lowest Common Ancestor of Deepest Leaves

    题目如下: Given a rooted binary tree, return the lowest common ancestor of its deepest leaves. Recall th ...

  4. 封装storage

    export const local = { getItem(key) { let value = localStorage.getItem(key) if (/^\{.*\}$/.test(valu ...

  5. div的文字倾斜

    最近要写一个页面,需要一排文字是倾斜的,我就写了一下 <div class="qingx">倾斜导航</div> div.qingx{ -moz-trans ...

  6. SpringCloud 教程 (四) docker部署spring cloud项目

    一.docker简介 Docker是一个开源的引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.开发者在笔记本上编译测试通过的容器可以批量地在生产环境中部署,包括VMs(虚拟机). ...

  7. IDEA插件之自动查找bug工具

    打开idea 插件搜索界面 输入 FindBugs-IDEA,安装完成后重启,选中要查找的包,右键找到对应的 FindBugs就可以开始进行自动扫描了

  8. [CSP-S模拟测试]:打扫卫生(暴力)

    题目描述 有$N$头奶牛,每头那牛都有一个标号$P_i1\leqslant Pi\leqslant M\leqslant N\leqslant 40,000$.现在$Farmer\  John$要把这 ...

  9. matlab 中 ordfilt2() 函数

    简介: ordfilt2 是一个二维数据过滤器,首先对根据滤窗口中的非零元素对目标矩阵中的元素进行排序,然后用其中第K(通过参数指定)大的元素代替原数据值,并以此过程遍历目标矩阵中的每一个元素. 一. ...

  10. iptables List the rules in a chain or all chains

    [root@e ~]# iptables -hiptables v1.4.21 Usage: iptables -[ACD] chain rule-specification [options] ip ...