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 ...
随机推荐
- 为什么企业全面云化需要IT战略支撑和驱动？
引子:为什么传统企业全面云化一直磨磨唧唧举步维艰? 笔者将企业上云大体上分为几个阶段: 第一个阶段是基础设施虚拟化.即将应用从物理机搬到(lift and shift migration)虚拟机上.基 ...
- HCL华三模拟器静态路由实验
(copy自我的其他博客网站) 拓扑如下: 实验目的:通过给A.B.C三台路由器配置静态路由,使PC1可以ping通PC2. 实验环境:Windows10 (21H1),HCL(V3.0.1) 实验步 ...
- CPU测试工具
目录 一.简介 二.大量计算 三.大量IO 四.大量进程 一.简介 使用stress-ng是一个 Linux 系统压力测试工具,模拟进程平均负载升高的场景. 使用sysstat来检查监控和分析. mp ...
- CF1036A Function Height 题解
Content 给定一个坐标系,在它的 \(x\) 轴上有 \(2n+1\) 个点 \(P_0,P_1,P_2,...,P_{2n}\),其中对于 \(0\leqslant i\leqslant 2n ...
- CF1108A Two distinct points 题解
Content 有 \(q\) 次询问,每次询问给定四个数 \(l_1,r_1,l_2,r_2\).对于每次询问,找到两个数 \(a,b\),使得 \(l_1\leqslant a\leqslant ...
- 什么是协程？与线程和进程对比优劣在哪？gevent协程示例代码
协程 协程,又称微线程,纤程.英文名Coroutine..一句话说明什么是线程:协程是一种用户态的轻量级线程. 协程拥有自己的寄存器上下文和栈.协程调度切换时,将寄存器上下文和栈保存到其他地方,在 ...
- jquery绑定事件时如何向事件函数里传参数
jquery绑定事件时如何向事件函数里传参数 jquery绑定事件时如何向事件函数里传参数 举例子说明: 步骤1: var button=$('<button type="button ...
- [react]react创建app,路由，mobx 全教程
1.创建app, npx create-react-app my-app Cmd Copy 2.进入项目目录 cd my-app Cmd Copy 3.启用配置文件(默认是不开启配置文件的) ya ...
- JavaWebServle执行流程解析
Servlet Servlet 1.定义: 注:servlet版本2.5 Servlet是Java的一个类.既然是一个类.那必然要遵循一定的规范.如下所示. a.必须继承 javax.servlet. ...
- JAVA获取本机的MAC地址
/** * 获取本机的Mac地址 * @return */ public String getMac() { InetAddress ia; byte[] mac = null; try { // 获 ...