React-组件嵌套-子组件通过委托向父组件传值
一、简述
父组件嵌套子组件，父组件的处理函数通过属性的方式赋值组子组件（
<GenderSelect handleSelect={this.handleSelect}></GenderSelect>
），子组件通过触发事件，委托调用父组件的处理函数，从而实现把值传给父组件（return <select onChange={this.props.handleSelect}>，
handleSelect: function(event) {
this.setState({gender: event.target.value})
}
）
二、代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>父子关系</title>
</head>
<body>
<script src="./react-0.13.2/react-0.13.2/build/react.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
var GenderSelect = React.createClass({
render: function() {
return <select onChange={this.props.handleSelect}>
<option value="0">男</option>
<option value="1">女</option>
</select>
}
})
var SignupForm = React.createClass({
getInitialState: function() {
return {
name: '',
password: '',
gender: '',
}
},
handleChange: function(name, event) {
var newState = {}
newState[name] = event.target.value
this.setState(newState)
},
handleSelect: function(event) {
this.setState({gender: event.target.value})
},
render: function() {
console.log(this.state)
return <form>
<input type="text" placeholder="请输入用户名" onChange={this.handleChange.bind(this, 'name')} />
<input type="password" placeholder="请输入密码" onChange={this.handleChange.bind(this, 'password')} />
<GenderSelect handleSelect={this.handleSelect}></GenderSelect>
</form>
}
})
React.render(<SignupForm></SignupForm>, document.body);
</script>
</body>
</html>
React-组件嵌套-子组件通过委托向父组件传值的更多相关文章
- 前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...
- vue组件之间的通信以及如何在父组件中调用子组件的方法和属性
在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...
- 042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 42.VUE学习之--组件之子组件使用$on与$emit事件触发父组件实现购物车功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- react native 之子组件和父组件之间的通信
react native开发中,为了封装性经常需要自定义组件,这样就会出现父组件和子组件,那么怎么在父组件和子组件之间相互通信呢,也就是怎么在各自界面push和pop.传值. 父组件传递给子组件: 父 ...
- React子组件和父组件通信
React子组件和父组件通信包括以下几个方面: 子组件获取父组件属性:props或者state 子组件调用父组件的方法 父组件获取子组件的属性:props或者state 父组件调用子组件的方法 我们从 ...
- 使用React.cloneElement()给子组件传值
React提供了一个克隆组件的API: React.cloneElement( element, [props], [...child] ) 可以利用该方法,给子组件传值,使用如下: class Pa ...
- React篇-子组件调用父组件方法,并传值
react 中子组件调用父组件的方法,通过props: 父组件: isNote(data){} <div className="tabC01"> <FTab ta ...
- React 父组件触发子组件事件
Parent组件 import React from "react"; import Child from "./component/Child"; class ...
随机推荐
- Ubuntu 关闭锁屏界面的 on-screen keyboard
试了试屏幕键盘,在 系统设置里开启了,又关了,但是在屏幕解锁时总是出现 screen keyboard,老烦人了,不知到在哪里关闭了,系统设置里面都关了,网上搜了解决办法,原来在这里 把 show w ...
- PLSQL读取XML的数据
最近公司做的几个项目,都是通过EBS与外部系统的Web Service进行数据的交互,而调用Web Service的时候,我们所传送的数据,都是按照约定的XML格式来传递,所以EBS接收到数据之后,需 ...
- Travis-CI的进一步使用
今天主要对.travis.yml文件和makefile进行进一步的了解: 1.在.travis.yml文件中添加了给linux系统中安装了cppunit库的语句,使能够持续集成写过的单元测试的代码.主 ...
- Node.js 学习（三） NPM 使用介绍
NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并 ...
- C#委托详解（3）：委托的实现方式大全（续）
接上篇(C#委托详解(2):实现方式大全),本篇继续介绍委托的实现方式. 4.Action<T>和Func<T>委托 使用委托时,除了为每个参数和返回类型定义一个新委托类型之外 ...
- 拓展Jquery对象，实现Post提交并跳转
$.extend({ StandardPost:function(url,args){ var body = $(document.body), form = $("<form met ...
- android apk 自我保护技术-加密apk
经过了忙碌的一周终于有时间静下来写点东西了,我们继续介绍android apk防止反编译技术的另一种方法.前两篇我们讲了加壳技术(http://my.oschina.net/u/2323218/blo ...
- 设置 Eclipse 智能代码提示,大幅度减少 alt+/ 使用频率，打每个字都出现代码提示的办法
以前网上有个英文版本的,现在自己汉化一下...O(∩_∩)O 哈哈 ~ http://www.cnblogs.com/lidabo/archive/2013/03/05/2944245.html ...
- JavaScript 异常
转载自:http://www.cnblogs.com/aqbyygyyga/archive/2011/10/29/2228824.html(排版格式修改了一下) 一.错误处理的重要性 以前,javas ...
- ngcordova 监控网络制式改变
ngcordova 监控网络制式改变 keywords cordova,phonegap,ionic,network,网络制式 API参考 http://ngcordova.com/docs/plug ...