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 ...
随机推荐
- 令无数程序员加班的 Log4j2 远程执行漏洞复现
前情提要 Apache 存在 Log4j 远程代码执行漏洞,将给相关企业带来哪些影响?还有哪些信息值得关注? 构建maven项目引入Log4j2 编写 pom 文件 <?xml version= ...
- Redis学习推荐资料合集
目录 一.官方 二.书籍 三.推荐博客 一.官方 redis官网 redis中文网 redis中文命令网 redis模块 redis-github源码 redis报告 二.书籍 <Redis开发 ...
- 前端浅谈-协议相关(DNS协议)
从应用层到实体层的协议太多了,我们并不能一一涉及,目前来说就打算整理可能会与前端相关的协议. 前端面试常会问到一个问题-"从输入一个url到页面渲染经历了哪些过程".这其实是一个相 ...
- Blazor是春天还是寒风里的挣扎
官方解释Blazor Blazor允许您使用c#而不是JavaScript构建交互式web UI. Blazor应用由可重用的web UI组件组成,这些组件使用c#.HTML和CSS实现.客户端和服务 ...
- 安装xampp开发环境更改默认项目路径
xampp开发环境中默认的项目路径在xampp下的htdocs文件下 如果想修改默认项目的位置步骤如下: 1)D:\xampp\apache\conf 找到httpd.conf打开 2)找到 Docu ...
- [BUUCTF]PWN——jarvisoj_tell_me_something
jarvisoj_tell_me_something 附件 步骤: 例行检查,64位程序,开启了NX保护 运行一下程序,看看程序的大概流程 64位ida载入,shift+f12检索程序里的字符串 看到 ...
- CF793A Oleg and shares 题解
Content 有 \(n\) 支股票,第 \(i\) 支股票原价为 \(a_i\) 卢布.每秒钟可能会有任意一支股票的价格下降 \(k\) 卢布,以至于降到负数.求所有股票的价格均变得相同所要经过的 ...
- LuoguP7041 [NWRRC2016]King's Heir 题解
Content 给出现在的日期,请从 \(n\) 个人当中选出一个人,使得他是所有成年人(\(\geqslant 18\) 岁的人)中年龄最小的. 数据范围:设日期为 \(yy/mm/dd\),则有 ...
- Shell之Sed常用用法
匹配某字符串开头的行,整行替换 文本原内容 目的: SELINUX= 整行替换为SELINUX=disabled # grep -Ev '^$|^#' /etc/selinux/config SELI ...
- generating project in interactive mode
解决方案:加个参数 -DarchetypeCatalog=internal 让它不要从远程服务器上取catalog