//子组件
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. git分布式版本管理系统

    Git是分布式版本管理系统Svn是集中式版本管理系统 git速度快,适合大规模协同开发 什么是分布式版本管理系统 假如有10个人,每个人的代码库都是独立的,自己想进行代码提交回滚都可以,无需链接中央服 ...

  2. LC 835. Image Overlap

    Two images A and B are given, represented as binary, square matrices of the same size.  (A binary ma ...

  3. cat中文正常vi中文乱码

    Linux cat中文正常vi中文乱码 问题示例 出现此问题,有可能是vim 编辑器的配置编码方面的问题. 出现此情况,在vim 编辑器中输入 :e ++enc=utf8 :e ++enc=zh_CN ...

  4. Swagger介绍及使用

    相信无论是前端还是后端开发,都或多或少地被接口文档折磨过.前端经常抱怨后端给的接口文档与实际情况不一致.后端又觉得编写及维护接口文档会耗费不少精力,经常来不及更新.其实无论是前端调用后端,还是后端调用 ...

  5. [ML] Feature Selectors

    SparkML中关于特征的算法可分为:Extractors(特征提取).Transformers(特征转换).Selectors(特征选择)三部分. Ref: SparkML中三种特征选择算法(Vec ...

  6. [转]html里a标签中href调用js的几种方法

    文章转自:https://blog.csdn.net/best_luxi/article/details/45062301 我们常用的在a标签中有点击事件: 1. a href=”javascript ...

  7. Python3 循环_break和continue语句及循环中的else子句

    break和continue语句及循环中的else子句break语句可以跳出for和while的循环体.如果你从for或while循环中终止,任何对应的循环else块将不执行. continue语句被 ...

  8. 第一个React Native项目

    1>下图操作创建第一个React Native项目: 用Xcode运行界面如下: 记住: 在使用项目文件期间,终端记住不要关闭的哟!!! 改变了程序代码,需要刷新运行,使用快捷键: Comman ...

  9. 如何创建一个img文件并且mount 它

    https://ubuntuhak.blogspot.com/2012/10/how-to-create-format-and-mount-img-files.html

  10. flask(2.0)

    目录 一. Flask基础(一) 1.Flask启动 2.路由 3.Response 4.Request 5.Jinja2 6.session 二.Flask基础(二) 1.路由配置 (1)metho ...