子组件向父组件传值，注意父组件传递函数的时候必须绑定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. RocketMQ架构原理解析（三）：消息索引

    一.概述 "索引"一种数据结构,帮助我们快速定位.查询数据 前文我们梳理了消息在Commit Log文件的存储过程,讨论了消息的落盘策略,然而仅仅通过Commit Log存储消息是 ...

  2. ANTLR 相关术语

    下面介绍很多重要的与语言识别相关的术语. 语言(Language) A language is a set of valid sentences 一门语言是一个有效语句的集合. Sentences a ...

  3. Java定时器演进过程和生产级分布式任务调度ElasticJob代码实战

    为何要使用分布式任务调度 **本人博客网站 **IT小神 www.itxiaoshen.com 演示项目源码地址** https://gitee.com/yongzhebuju/spring-task ...

  4. 【Azure 应用服务】Azure App Service For Linux 上实现 Python Flask Web Socket 项目 Http/Https

    问题描述 在上篇博文"[Azure 应用服务]App Service for Linux 中实现 WebSocket 功能 (Python SocketIO)"中,实现了通过 HT ...

  5. 《Power Query数据清洗实战》捉虫……

    先道歉,<Power Query数据清洗实战>里,有虫-- 谢谢大家帮忙捉虫了. 谢谢法叔,他捉了四只--(汗) 112页第倒第二行,[追加查询],应是[合并查询]. 151.154.15 ...

  6. Python变量的作用域在编译过程中确定

    为了节省读友的时间,先上结论(对于过程和细节感兴趣的读友可以继续往下阅读,一探究竟): [结论] 1)Python并不是传统意义上的逐行解释型的脚本语言 2)Python变量的作用域在编译过程就已经确 ...

  7. LuoguP4263 [Code+#3]投票统计 题解

    Content 有 \(t\) 组询问,每组询问给定一个长度为 \(n\) 的数列,请将出现次数最多的数按照从小到大的顺序输出,或者这些数在数列中出现的次数都相等. 数据范围:\(t\) 未知,\(n ...

  8. npm ERR! Error: EPERM: operation not permitted

    转载于:https://blog.csdn.net/qq_36772866/article/details/86934950 win10 在npm install时报错 解决方案 删除node-mou ...

  9. flink启动报错：java.lang.NoSuchMethodError: org.apache.flink.api.java.ClosureCleaner.clean(Ljava/lang/Object;Z)V

    这是因为pom文件引入的flink相关依赖设置成了provided 作用域 要嘛把这个去掉 但是如果是IDEA的话 可以更简单的操作 把这个打勾保存 接着重新启动main方法即可

  10. C++封装C语言读写文件

    自己项目需要,封装C语言读写文件. 为了兼容低版本的编译器,因为低版本的编译器(比如,Vs2010,Vs2008)他们可能不支持 modern c++. 项目 使用 cmake管理的项目. 可以在 g ...