//子组件
var Child = React.createClass({
render: function(){
return (
<div>
请输入邮箱:<input onChange={this.props.handleEmail}/>
</div>
)
}
});
//父组件,此处通过event.target.value获取子组件的值
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子组件向父组件传值

    子组件向父组件传值,注意父组件传递函数的时候必须绑定this到当前父组件(handleEmail={this.handleEmail.bind(this)}),不然会报错 /***实现在输入框输入邮箱 ...

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

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

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

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

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

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

  6. react typescript 子组件调用父组件

    //父组件 import * as React from 'react'import { Input } from 'antd'const Search = Input.Searchimport &q ...

  7. vue2.0 子组件和父组件之间的传值(转载)

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

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

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

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

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

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

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

随机推荐

  1. HDU3549:Flow Problem(最大流入门EK)

    #include <stdio.h> #include <string.h> #include <stdlib.h> #include <queue> ...

  2. 对于ssh服务的简单配置,似的自己的服务器更加安全

    对于一台服务器,最大的问题莫过于安全.没有安全性的服务器即使再牛*,性能再好,作用再大,也是分分钟被人搞定,而且还是揉虐性的...当然万事没有绝对的安全,我们只是将危险降低而已.本文只针对于ssh服务 ...

  3. Smarty模板实现隔行换样式

    在网上找了好多关于隔行改变样式的文章,都不符合自己的要求,所以自己想了好多办法,终于把隔行改变样式拿下! 这是模板文件中商品分类列表         <!--{foreach from=$cat ...

  4. PCL中有哪些可用的PointT类型(4)

    博客转载自:http://www.pclcn.org/study/shownews.php?lang=cn&id=269 PointWithViewpoint - float x, y, z, ...

  5. 系统调用与内存管理(sbrk、brk、mmap、munmap)(转)

    一.系统调用(System Call):在Linux中,4G内存可分为两部分——内核空间1G(3~4G)与用户空间3G(0~3G),我们通常写的C代码都是在对用户空间即0~3G的内存进行操作.而且,用 ...

  6. JAVA 基础编程练习题15 【程序 15 排序】

    15 [程序 15 排序] 题目:输入三个整数 x,y,z,请把这三个数由小到大输出. 程序分析:我们想办法把最小的数放到 x 上,先将 x 与 y 进行比较,如果 x>y 则将 x 与 y 的 ...

  7. php7与其他版本共存

    转自: https://zhangge.net/5088.html php7编译安装 https://zhangge.net/5075.html

  8. java数据结构之WeakHashMap

    一.JAVA中的四种引用类型 1.强引用(StrongReference):强引用是最为普遍的一种引用,如果对象被强引用,那么垃圾回收器无论如何都不会回收它,当内存不足时会抛出OutOfMemoryE ...

  9. Windows10内置Linux子系统初体验

    http://www.jianshu.com/p/bc38ed12da1dhttp://www.jianshu.com/p/bc38ed12da1d WSL 前言 前段时间,机子上的win10又偷偷摸 ...

  10. 20190603 - CentOS 7 提示 Failed to load SELinux policy. Freezing 导致卡住不启动的解决办法

    现象 最近 Windows 和两台 Mac 混用,将 Windows VirtualBox 中安装的 CentOS 7 拷贝到 Mac 上. 启动 CentOS 7 时,图形界面进度卡在最后,按 Es ...