React 组件嵌套 父子关系
代码实例;
<!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 组件嵌套 父子关系的更多相关文章
- react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)
第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...
- React 组件间通讯
React 组件间通讯 说 React 组件间通讯之前,我们先来讨论一下 React 组件究竟有多少种层级间的关系.假设我们开发的项目是一个纯 React 的项目,那我们项目应该有如下类似的关系: 父 ...
- 5. React 组件的协同使用 组件嵌套和Mixin
组件是React的核心,构建大型项目时多个组件之间需要进行协同使用.可以从横向和纵向两个角度来实现组件的协同使用,纵向的协同使用就是组件嵌套,横向的协同使用就是Mixin(抽取公共方法 ...
- Vue_(组件通讯)父子组件简单关系
Vue组件 传送门 在Vue的组件内也可以定义组件,这种关系成为父子组件的关系 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的 ...
- React入门---组件嵌套-5
组件嵌套 我们现在需要组件嵌套,所以要创建其他组件,目前有一个头部组件,在./components/header.js; 接下来在components文件中创建:底部组件footer.js 和主体组件 ...
- Vue 组件&组件之间的通信 之 非父子关系组件之间的通信
Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信: 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的: 实例: 初始加 ...
- vue-自主研发非父子关系组件之间通信的问题
相信很多人都知道解决组件间通信:vuex,今天的主角不是它. element-ui里解决组件间通信的思路:emitter.js ,但是如果你拿来你会发现它解决的是父子组件之间的通信问题.如果我们通信的 ...
- React 组件协同关系
组件协同的两种方法,1种是纵向的协同,就是组件嵌套,重点在于代码的封装,2种是横向协同也就是Mixin,组件抽离,重点在于代码复用 1.组件嵌套,父组件通过属性向子组件,子组件可以通过事件处理函数以委 ...
- RXJS组件间超越父子关系的相互通信
RXJS组件间超越父子关系的相互通信 用到这个的需求是这样的: 组件A有数据变化,将变化的数据流通知组件B接收这个数据流并做相应的变化 实例化RXJS的subject对象 import { Injec ...
随机推荐
- 外包项目测试工作量评估指南&外包项目测试验收流程
## ### 外包项目测试工作量评估指南 1.目的 编写本指导书的目的旨在为我公司进行测试外包服务工作进行指导,帮助项目经理和相关人员编写测试方案.评估工作量.制定测试计划和测试策略等, ...
- python基础：4.请至少列举5个 PEP8 规范（越多越好）。
1.变量命名规则: 不能与关键字重名,必须以数字字母下划线组成,且不能以数字开头 2.导包规则: # 推荐这样写 import random import sys # 不推荐这样写 import ra ...
- tensorflow函数介绍(2)
参考:tensorflow书 1.模型的导出: import tensorflow as tf v1=tf.Variable(tf.constant(2.0),name="v1") ...
- 谷歌已经对Android的开源严防死守
上周,沸沸扬扬的Android垄断案把Google又一次推向了风口浪尖,在这次的垄断案中,Google被欧盟起诉赔偿50亿美元,被起诉的其中一个原因是Google对外宣称Android是开放的,但其实 ...
- JS 中的offset、scroll、client总结
经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...
- git修改commiter date
GIT: change commit date to author date git filter-branch --env-filter 'export GIT_COMMITTER_DATE=&qu ...
- 【VisualStdio】在VS2015中显示上下文菜单中“创建单元测试”菜单
---恢复内容开始--- VS2012以后创建单元测试的选项被默认隐藏了,创建单元测试变得无比低效率.看msdn的说法好像是想推荐使用Intell Test来替代单元测试的用途,但是还没摸清楚也不敢瞎 ...
- vux使用方法
# 使用vux及vuex-i18n需要做的工作 ### 1.首先需要安装vux ### 2.需要安装vux-loader ### 3.需要安装vuex ### 4.需要安装vuex-i18n ### ...
- zabbix真的很简单 (安装篇)
系统环境: Centos 6.4 一直觉得 zabbix 很简单,但是还是有好多人看了好多文档都搞不明白怎么用,我从2013年使用到现在也小有心得,如果时间允许,很高兴与大家一起分享我在使用过程中的一 ...
- webpack请求文件路径代理
在开发模式下,访问页面请求会跑到根路径,因为写的都 ./images 而index又在根目录, 所以访问地址会是 http://localhost:8080/images/abc.jpg 而实际 ...