react子组件向父组件传值
子组件向父组件传值，注意父组件传递函数的时候必须绑定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子组件向父组件传值的更多相关文章
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
- React篇-子组件调用父组件方法,并传值
react 中子组件调用父组件的方法,通过props: 父组件: isNote(data){} <div className="tabC01"> <FTab ta ...
- vue2.0 子组件和父组件之间的传值（转载）
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
- Vue 组件&组件之间的通信 之 子组件向父组件传值
子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...
- React子组件和父组件通信
React子组件和父组件通信包括以下几个方面: 子组件获取父组件属性:props或者state 子组件调用父组件的方法 父组件获取子组件的属性:props或者state 父组件调用子组件的方法 我们从 ...
- vue+elementUI项目，父组件向子组件传值，子组件向父组件传值，父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- 【转】Vue组件一-父组件传值给子组件
Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...
- Vue2.0 子组件和父组件之间的传值
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
- vue.js+koa2项目实战（五）axios 及 vue2.0 子组件和父组件之间的传值
axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...
随机推荐
- VectorCAST - 通过确保测试的完整性控制产品质量
软件测试面临的问题有一句格言是这样说的,"如果没有事先做好准备,就意味着做好了 失败的准备."如果把这个隐喻应用在软件测试方面,就可以这样说"没有测试到,就意味着测试失败 ...
- [BUUCTF]REVERSE——[WUSTCTF2020]level2
[WUSTCTF2020]level2 附件 步骤: 例行检查,32位程序,upx壳儿 脱完壳儿,扔进32位ida,习惯性的检索字符串,在我没找到什么关键信息,准备去看main函数的时候,将字符串拉到 ...
- ssm项目中常用的上传文件
在项目中,上传文件一般是必不可少的,所以今天学到新的上传方式,就干脆将学习过的上传方式记录一下 一.表单直接上传图片 表单头要设置 <form action="" metho ...
- Sentinel-Go 源码系列（三）滑动时间窗口算法的工程实现
要说现在工程师最重要的能力,我觉得工程能力要排第一. 就算现在大厂面试经常要手撕算法,也是更偏向考查代码工程实现的能力,之前在群里看到这样的图片,就觉得很离谱. 算法与工程实现 在 Sentinel- ...
- CF1581B Diameter of Graph 题解
Content \(\textsf{CQXYM}\) 想要构造一个包含 \(n\) 个点和 \(m\) 条边的无向连通图,并且他希望这个图满足下列条件: 该图中不存在重边和自环.也就是说,一条边应该连 ...
- java 多线程: Thread 并发访问-代码块同步synchronized {}；String作为被锁的对象
方法同步的弊端 方法同步的时候,如果一个方法需要线程安全控制的代码速度其实很快,但是还有其他的业务逻辑代码耗时非常长(比如网络请求),这样所有的线程就在这一块就等待着了,这样造成了极大的资源浪费如果并 ...
- 使用JSONArray.fromObject转化list时，如果有集合属性，很容易出错，此刻把集合属性过滤掉便可
使用JSONArray.fromObject转化list时,如果有集合属性,很容易出错,此刻把集合属性过滤掉便可
- 使用xlsx实现Excel导入
需求 实现在系统里批量导入数据,通过上传一个excel文件,前端将文件处理为json数据发送给后端.(最好与后端定义好上传的文件模板,方便处理数据) 实现 使用xlsx: xlsx的github地址: ...
- centos7使用Dockerfile(docker-compose)运行jar包
Dockerfile文件 FROM openjdk:8-jdk-alpine MAINTAINER "镜像维护者的姓名和邮箱地址" WORKDIR app ADD demo.jar ...
- 【论文笔记】 Popularity Bias in Dynamic Recommendation
Popularity Bias in Dynamic Recommendation Authors: Ziwei Zhu, Yun He, Xing Zhao, James Caverlee KDD' ...