子组件向父组件传值，注意父组件传递函数的时候必须绑定this到当前父组件（handleEmail={this.handleEmail.bind(this)}），不然会报错

/***实现在输入框输入邮箱时，在div中即时显示输入内容***/

<body>

    <div id="test"></div>

</body>

//子组件

var Child = React.createClass({

    render: function(){

        return (

            <div>

                邮箱：<input onChange={this.props.handleEmail}/>

            </div>

        )

    }

});

//父组件

var Parent = React.createClass({

    getInitialState: function(){

        return {

            email: ''

        }

    },

    handleEmail: function(event){

        this.setState({email: event.target.value});

    },

    render: function(){

        return (

            <div>

                <div>邮箱：{this.state.email}</div>

                <Child name="email" handleEmail={this.handleEmail.bind(this)}/>

            </div>

        )

    }

});

React.render(

  <Parent />,

  document.getElementById('test')

);

react子组件向父组件传值的更多相关文章

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

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

  2. React篇-子组件调用父组件方法,并传值

    react 中子组件调用父组件的方法,通过props: 父组件: isNote(data){} <div className="tabC01"> <FTab ta ...

  3. vue2.0 子组件和父组件之间的传值（转载）

    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...

  4. Vue 组件&组件之间的通信 之 子组件向父组件传值

    子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...

  5. React子组件和父组件通信

    React子组件和父组件通信包括以下几个方面: 子组件获取父组件属性:props或者state 子组件调用父组件的方法 父组件获取子组件的属性:props或者state 父组件调用子组件的方法 我们从 ...

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

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

  7. 【转】Vue组件一-父组件传值给子组件

    Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...

  8. Vue2.0 子组件和父组件之间的传值

    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...

  9. vue.js+koa2项目实战（五）axios 及 vue2.0 子组件和父组件之间的传值

    axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...

随机推荐

  1. 初步接触Linux命令

    目录 虚拟机快照 1.首先将已经运行的系统关机 2.找到快照 拍摄快照 3.找到克隆 下一步 有几个快照会显示几个 4.克隆完成后 要修改一下IP 不然无法同时运行两个虚拟机系统 系统介绍 1.pin ...

  2. 【C/C++】例题3-6 环状序列/算法竞赛入门经典/数组和字符串

    [字典序比较] 对于两个字符串,比较字典序,从第一个开始,如果有两位不一样的出现,那么哪个的ASCII码小,就是字典序较小.如果都一样,那么短的小. [题目] 输入一个环状串,输出最小的字典序序列. ...

  3. 『学了就忘』Linux服务管理 — 77、RPM包安装基于xinetd的服务的管理

    目录 1.基于xinetd服务的启动管理 (1)telnet服务安装 (2)telnet服务启动 2.基于xientd服务的自启动管理 现在Linux系统中基于xinetd的服务越来越少了,但Linu ...

  4. SimpleCursorAdapter 原理和实例

    SimpleCursorAdapter 1. 原理参见下面代码注释 Cursor cursor = dbHelper.fetchAllCountries(); //cursor中存储需要加载到list ...

  5. 转：Java IO

    转自:http://www.cnblogs.com/rollenholt/archive/2011/09/11/2173787.html [案例1]创建一个新文件 ? 1 2 3 4 5 6 7 8 ...

  6. 关于某 App 请求参数 sign 字段加密分析

    受害者: 6ZqG5LyX5pWw5o2u 通过 Charles 抓包发现关键信息请求均携带 sign 参数,且每次请求的值都不一样: 使用 jadx 将对应的 apk 反编译并分析,全局搜素 &qu ...

  7. [BUUCTF]PWN——babyheap_0ctf_2017

    [BUUCTF]PWN--babyheap_0ctf_2017 附件 步骤: 例行检查,64位,保护全开 试运行一下程序,看到这个布局菜单,知道了这是一道堆的题目,第一次接触堆的小伙伴可以去看一下这个 ...

  8. MES目前应用很多，为什么APS计划排程系统应用很少？

    一.APS自动化计划排程能带来哪些效益? 1.提高订单准时交货率,提高客户满意度 2.缩短生产制造周期,提高生产效率 3.多品种.小批量.以销定产,快速解决插单.急单预测交期问题 4.减少物料采购提前 ...

  9. 新建日历（Project）

    <Project2016 企业项目管理实践>张会斌 董方好 编著 默认的标准日历设置好了以后,问题又来了:出现某些特殊的原因,可能还需要一个与标准日历设置不同的日历,这个可怎么弄? 没关系 ...

  10. WebSocket协议理解-数据包格式解析

    WebSocket 的诞生 做客户端开发时,接触最多的应用层网络协议,就是 HTTP 协议,而今天介绍的 WebSocket,下层和 HTTP 一样也是基于 TCP 协议,这是一种轻量级网络通信协议, ...