<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="js/react.js"></script>
  <script src="js/react-dom.js"></script>
  <script src="js/browser.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">
  var AComponent = React.createClass({
    handleChange:function(){
        console.log(this.refs.inputTxt.value);
        this.props.funcSave(this.refs.inputTxt.value);
    },
    render:function(){
      return <input
       ref='inputTxt'
      onChange={this.handleChafuncSavenge}
      type='text'/>;
    }
  })

  var BComponent = React.createClass({
    handleClick:function(){
      console.log(this.props.funcGet());
    },
    render:function(){
      return <button onClick={this.handleClick}>
      {this.props.name}
      </button>;
    }
  })

  var MainComponent = React.createClass({
    result:0,
    save:function(value){
      console.log("in mainComponent value is "+value);
      this.result = value;
    },
    get:function(){
      return this.result;
    },
    render:function(){
      return <div>
      <AComponent funcSave={this.save}/>
      <BComponent funcGet={this.get} name='获取输入的值'/>
      </div>
    }
  })

  ReactDOM.render(
  <MainComponent/>,
  document.getElementById('example')
  )

</script>

</body>
</html>

React 多组件传值props和this的更多相关文章

  1. 【React入门】React父子组件传值demo

    公司一直是前后端分离的,最近集团开始推进中后台可视化开发组件(基于React封装),跟师兄聊起来也听说最近对后台开发人员的前端能力也是越来越重视了.所以作为一名后端,了解下前端的框架对自己也是大有好处 ...

  2. Vue 父子组件传值 props

    1.Vue 的渲染周期: vue 如何实现响应式追踪. 父子组件通信有很多方式,今天单独聊下props 的方式.我们通过查找官方文档很容发现,props传值有静态和动态两种传值方式. 当然props ...

  3. react 父子组件传值

    父组件向子组件传递信息 父组件片段 constructor(props){ super(props) this.state={ message:"我是父组件传来的" } } ren ...

  4. 四、React创建组件、 JSX使用、绑定数据、引用图片方式、数组（列表）循环输出

    接:https://www.cnblogs.com/chenxi188/p/11702799.html 用上节建好的my-app项目: my-app/ README.md node_modules/ ...

  5. vue+elementUI项目，父组件向子组件传值，子组件向父组件传值，父子组件互相传值。

    vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...

  6. React创建组件的方法，组件的props属性、state属性的用法和特点，父子组件传值，兄弟组件传值

    创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...

  7. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

  8. React Native组件、生命周期及属性传值props详解

    创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...

  9. React子组件与父组件传值

    一 子组件向父组件传值 //子组件var Child = React.createClass({ render: function(){ return ( <div> 请输入邮箱:< ...

随机推荐

  1. UnicodeDecodeError: 'ascii' codec can't decode byte 0xe5 in position 1: ordinal not in range(128)

    对于写python的人来说,这个异常一点不陌生,只要涉及到中文字符串的操作,一不小心就会出错.关于这个问题的解释,找到一篇好文,分享一下. 原文地址:https://blog.csdn.net/u01 ...

  2. dijkstra P4779 【模板】单源最短路径（标准版） 洛谷luogu

    题目背景 2018 年 7 月 19 日,某位同学在 NOI Day 1 T1 归程 一题里非常熟练地使用了一个广为人知的算法求最短路. 然后呢? 100→60 Ag→Cu 最终,他因此没能与理想的大 ...

  3. 关于python3.x语法

    注1:该文章中所有的图示均使用的pycharm 注2:#号后面没有声明的均为运算结果 #用井字符开头的是单行注释 """ 多行字符串用三个引号 包裹,也常被用来做多 行注 ...

  4. Photoshop 基础五 橡皮擦工具

    橡皮擦工具,对图层消除 背景色橡皮擦工具,对图层,消除背景色 魔棒橡皮擦工具,对图层,颜色相近的消除

  5. android 权限动态申请

    名字其实有点让人感觉高大上"权限动态申请",其实也没有什么, 以前做Android程序的时候,比如需要打开摄像头 那么需要在 然后就可以了, 但是Android6.0之后呢,有些权 ...

  6. 查看MS Sqlserver文件大小语句

    1..查询数据库的数据文件及日志文件的相关信息(包括文件组.当前文件大小.文件最大值.文件增长设置.文件逻辑名.文件路径等) select * from [数据库名].[dbo].[sysfiles] ...

  7. sklearn学习笔记之简单线性回归

    简单线性回归 线性回归是数据挖掘中的基础算法之一,从某种意义上来说,在学习函数的时候已经开始接触线性回归了,只不过那时候并没有涉及到误差项.线性回归的思想其实就是解一组方程,得到回归函数,不过在出现误 ...

  8. 一个JAVA程序员成长之路分享

    我搞JAVA也有些日子了, 因为我比较贪玩,上进心不那么强, 总是逼不得已为了高薪跳槽才去学习, 所以也没混成什么大牛, 但好在现在也已经成家立业, 小日子过的还算滋润, 起码顶得住一月近万元的吃喝拉 ...

  9. Aop笔记

    参考: https://blog.csdn.net/bombSKLK/article/details/79143145 示例 拦截的 注解的方法 @Around("@annotation(c ...

  10. Gitlab环境快速部署（RPM包方式安装）

    之前梳理了一篇Gitlab的安装CI持续集成系统环境---部署Gitlab环境完整记录,但是这是bitnami一键安装的,版本比较老.下面介绍使用rpm包安装Gitlab,下载地址:https://m ...