子组件向父组件传值，注意父组件传递函数的时候必须绑定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】【RedHat】下载 安装 注册

    RedHat 下载 安装 注册 记录 因为找入口太麻烦了,所以写了篇博文记录下来大致入口@萌狼蓝天 注册 点击进入注册地址(https://www.redhat.com/wapps/ugc/regis ...

  2. 剖析虚幻渲染体系（13）- RHI补充篇：现代图形API之奥义与指南

    目录 13.1 本篇概述 13.1.1 本篇内容 13.1.2 概念总览 13.1.3 现代图形API特点 13.2 设备上下文 13.2.1 启动流程 13.2.2 Device 13.2.3 Sw ...

  3. 为什么kafka和zk总是在一起？

    一.概念 发布订阅,一个发布者发布到消息,所有订阅者都可以接收到 生产消费,一个消息对象只能被一个消费者消费 kafka是生产者,zookeeper是消费者 有3个微服务,聚合形成一个统一的业务层 但 ...

  4. Java动态脚本Groovy读取配置文件

    前言:请各大网友尊重本人原创知识分享,谨记本人博客:南国以南i 核心涉及: @Value:作用是通过注解将常量.配置文件中的值.其他bean的属性值注入到变量中,作为变量的初始值. @Configur ...

  5. [BUUCTF]PWN2——rip

    [BUUCTF]PWN2-rip 题目网址:https://buuoj.cn/challenges#rip 步骤: 例行检查附件,64位程序,没有开启任何保护 nc一下,看看输入点的提示字符串,让我们 ...

  6. C# ASP.NET WebApi 跨域设置

    概述 前后端分离开发模式,一定会遇到跨域的问题.这里收集了2种 C# Asp.Net webapi 相关的跨域解决方案,方便后续查找参考. 2021/10/28 更新: 有更加简单高效的方式推荐< ...

  7. 估计工期标识（Project）

    <Project2016 企业项目管理实践>张会斌 董方好 编著 有时候吧,我们遇到的任务,工期并不是那么好定的,本来嘛,一个项目如果全靠拍脑袋,最后搞不好会被人锤脑袋-- 看来PM有风险 ...

  8. Office365与Office2016差异汇总

    以下很多链接来自原来的博客,如果有哪篇"被色情"的,请留言联系我,谢谢! 2020-8-29更新 通用 图片透明度:http://blog.sina.com.cn/s/blog_5 ...

  9. CF250A Paper Work 题解

    Content 有 \(n\) 个数,要分成若干堆,要求每堆中的负数最多只能有两个.试求出分成的堆数最少是多少,并求出每一堆里面的数的个数. 数据范围:\(1\leqslant n\leqslant ...

  10. LuoguP7189 [COCI2007-2008#6] PARKING 题解

    Content 有 3 辆卡车,第 \(i\) 辆卡车停车开始时间为 \(l_i\),结束时间为 \(r_i\)(不包含).现在有以下收费方式: 停车辆数 每分钟每辆车单价 \(1\) \(a\) \ ...