React学习——子组件给父组件传值
//子组件
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学习——子组件给父组件传值的更多相关文章
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
- react子组件向父组件传值
子组件向父组件传值,注意父组件传递函数的时候必须绑定this到当前父组件(handleEmail={this.handleEmail.bind(this)}),不然会报错 /***实现在输入框输入邮箱 ...
- React篇-子组件调用父组件方法,并传值
react 中子组件调用父组件的方法,通过props: 父组件: isNote(data){} <div className="tabC01"> <FTab ta ...
- React子组件和父组件通信
React子组件和父组件通信包括以下几个方面: 子组件获取父组件属性:props或者state 子组件调用父组件的方法 父组件获取子组件的属性:props或者state 父组件调用子组件的方法 我们从 ...
- 【转】Vue组件一-父组件传值给子组件
Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...
- react typescript 子组件调用父组件
//父组件 import * as React from 'react'import { Input } from 'antd'const Search = Input.Searchimport &q ...
- vue2.0 子组件和父组件之间的传值(转载)
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
- Vue 组件&组件之间的通信 之 子组件向父组件传值
子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- Vue2.0 子组件和父组件之间的传值
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
随机推荐
- 微PE:装机不求人,教你制作最纯净的PE安装系统
https://www.jianshu.com/p/50fd699ea916 超好用的PE工具,免费.纯净.无广告,装系统必备! https://www.jianshu.com/p/fecf090b2 ...
- 图解Python 【第八篇】:网络编程-进程、线程和协程
本节内容一览图: 本章内容: 同步和异步 线程(线程锁.threading.Event.queue 队列.生产者消费者模型.自定义线程池) 进程(数据共享.进程池) 协程 一.同步和异步 你叫我去吃饭 ...
- 为什么HashMap继承了AbstractMap还要实现Map?
前言 之前看源码一直忽略了这个现象,按理说HashMap的父类AbstractMap已经实现了Map,它为什么还要实现一次呢?遂上网查了一下,背后原因让人大跌眼镜. 原因 这是类库设计者的拼写错误,其 ...
- Elasticsearch常见错误与配置简介
一.常见错误 1.1 root用户启动elasticsearch报错 Elasticsearch为了安全考虑,不让使用root启动,解决方法新建一个用户,用此用户进行相关的操作.如果你用root启动, ...
- vue/cli 3.0配置NODE_ENV
原文地址 在项目开发中我们需要配置环境变量,开发环境,生产环境和测试环境.在cli 2.0的版本中我们是通过在config文件夹进行配置的,vue/cli 3.0相对简单,只需要在项目根目录创建.en ...
- 从Myeclipse到IntelliJ IDEA-——让你摆脱鼠标,全键盘操作
注:本文是对原文章(https://blog.csdn.net/luoweifu/article/details/13985835)做的补充 快捷键对比 Myeclipse IDEA 说明 Ctrl+ ...
- ASP.NET Core 入门笔记3,使用ASP.NET Core MVC框架构建Web应用
一.ASP.NET Core MVC 输出Hello World,Friend! 1.引入 ASP.NET Core MVC 修改应用启动类(Startup.cs),引入MVC模块并配置默认路由 pu ...
- 【VS开发】【C/C++开发】printf缓冲区刷新
printf之缓冲区小结: 今天调试程序,发现了一个有趣的现象,printf函数没有按照预期的结果输出重复的字符串,单步调试显示代码的确走到了打印屏幕的分支,没有显示不由得想到了是不是缓冲区去刷新的问 ...
- AttributeError: module 'unittest' has no attribute 'TestCase'
一个自己给自己挖的坑 大家千万不要用库的名称命名,特别是刚刚入门的时候.文件夹.文件,都不要用库的名称. 一旦与库重名,就会出现这种 AttributeError. 引以为戒,以后我再这么命名,我就是 ...
- rowkey散列和预分区设计解决hbase热点问题(数据倾斜)
Hbase的表会被划分为1....n个Region,被托管在RegionServer中.Region二个重要的属性:Startkey与EndKey表示这个Region维护的rowkey的范围,当我们要 ...