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 ...
随机推荐
- GPIO初始化之PB3/PB4/PA13/PA14/PA15引脚的复用--寄存器版本
为了节省IO资源单片机会在一个IO上复用很多功能,一般的单片机用到 一个功能后就能再用两外复用的功能了,这就体现出了STM32 GPIO的强大功能了,我们用重映射的方法把其中一个外设映射到其他IO脚上 ...
- Java Day 16
基本数据类型包装类 Integer.MAX_VALUE Integer.parseInt(); intValue(); valueOf(); 自动装拆箱 如果是一个字节范围,数据共享 字符串中 数值 ...
- Factorial Trailing Zeroes
Given an integer n, return the number of trailing zeroes in n!. Note: Your solution should be in log ...
- 团队开发——Alpha版总结会议
本组目前存在的问题: 1.在选题的时候,题目选的比较有难度,造成后期工作量较大,实现有难度(未能正确估计项目的难度). 2.最初规划时,设计的功能较多,但是技术水平达不到,导致目前完成功能较少. 3. ...
- Kibana 修改logo及汉化导航
修改此文件下E:\happy\kinbana\kibana-4.2.2-windows\kibana-4.2.2-windows\optimize\bundles的kibana.bundle.js文件 ...
- 每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友,今年亦是如此。HF作为牛客的资深元老,自然也准备了一些小游戏。其中,有个游戏是这样的:首先,让小朋友们围成一个大圈。然后,他随机指定一个数m,让编号为0的小朋友开始报数。每次喊到m-1的那个小朋友要出列唱首歌,然后可以在礼品箱中任意的挑选礼物,并且不再回到圈中,从他的下一个小朋友开始,继续0...m-1报数....这样下去....直到剩下
// test20.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> #include< ...
- jquery JSON的解析方式
第一次用JSON作为jquery异步请求的传输对象,结果在jquery请求后返回的结果是字符串还是json对象上折腾了半天.等到问题解决了,也大致明白怎么个意思了,归根结底还是对jquery对相关js ...
- 在C语言中嵌入汇编语言
TMS320C28x编译器允许在C程序中嵌入汇编指令,通过下面声明实现: asm(“assembler text”); 其中assembler text指汇编代码.asm指令一般用来处理C/C++语句 ...
- Goolg Chrome 插件开发--Hello world
开发Chrome插件很简单,只要会web开发(html+javascript+css)那么这个就是能驾轻就熟,只需要了解一下插件具体的运行环境及要求就OK了. 1.先创建一个html文件,名字随便取, ...
- 理解 Memory barrier
理解 Memory barrier(内存屏障) 发布于 2014 年 04 月 21 日2014 年 05 月 15 日 作者 name5566 参考文献列表:http://en.wikipedia. ...