<!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. dirty_background_ration 与 /proc/sys/vm/dirty_ratio

    wappiness的值的大小对如何使用swap分区是有着很大的联系的.swappiness=0的时候表示最大限度使用物理内存,然后才是 swap空间,swappiness＝100的时候表示积极的使用s ...

  2. nginx反向代理与Real-IP和X-Forwarded-For.txt

    本文作者张开涛.为保障<亿级流量网站架构核心技术>一书内容的连续性,有些需要读者了解的内容,或者书的补充和引申内容,会通过二维码嵌入的方式引导读者阅读学习.大家可以关注作者公众号“开涛的博 ...

  3. Linux系统--命令行安装weblogic10.3.6

    Linux下命令行安装weblogic10.3.6 一.安装前准备工作: 1.创建用户useradd weblogic;创建用户成功linux系统会自动创建一个和用户名相同的分组,并将该用户分到改组中 ...

  4. SkylineGlobe 6.5 如何实现简单多边形的动态绘制 C#示例代码

    在Skyline的TEPro软件中,我们可以很容易地绘制出多边形. 那么,在二次开发过程中,该如何绘制一个简单的多边形呢? 通过下面的示例代码,我们可以很容易完成这一项工作. 其中,重点需要了解Geo ...

  5. C语言中getch()、getche()和getchar()

    本文章为转载文章,文档贡献者wdzhangxiang 个人网址:www.baidu.com/p/wdzhangxiang 首先不要忘了,要用getch()必须引入头文件conio.h,以前学C语言的时 ...

  6. click事件和mousedown、mouseup事件

    点击select标签元素的时候,会弹出下拉.然而当option中没有元素时,就不希望弹出下拉(比如在某些浏览器中,点击select会默认出一个罩层效果,而此时没有数据选择的话,弹出比较不友好). 首先 ...

  7. [Python]Python 函数调用小例子

    函数定义: In [78]: def printme(str): ....: print str ....: return ....: 调用: In [79]: printme('This is Ji ...

  8. 浅谈js拖拽

    本文来自网易云社区 作者:刘凌阳 前言 本文依据半年前本人的分享<浅谈js拖拽>撰写,算是一篇迟到的文章. 基本思路 虽然现在关于拖拽的组件库到处都是,HTML5也把拖放纳入了标准.但考虑 ...

  9. maven docker 插件集成的几个小坑

    昨晚看springboot视频的时候,发现可以使用docker-maven-plugin这个插件直接build出 docker 镜像到远程服务器上,感觉很方便,于是自己也试了一下,但是碰到了几个问题, ...

  10. testNG-失败用例重跑方法探究

    实现IRetryAnalyzer类,重写其中的retry方法public class TestNGRetry implements IRetryAnalyzer { private int retry ...