React(0.13) 定义一个多选的组件
<!DOCTYPE html>
<html>
<head>
<title>React JS</title>
<script src="../build_0.13/react.js"></script>
<script src="../build_0.13/JSXTransformer.js"></script>
</head>
<body>
<div id="example"> </div> <script type="text/jsx">
var MySelect = React.createClass({
//初始化组件的值
getInitialState:function(){
return {options:['B']};
},
handleChange:function(event){
var checked = [];
var sel = event.target; //获取当前的DOM对象
for(var i=0; i<sel.length; i++){
var option = sel.options[i];
if(option.selected){
checked.push(option.value);
}
}
//设置options的值
this.setState({
options:checked
});
},
submitHandler:function(event){
event.preventDefault(); //阻止事件发生
alert(this.state.options);
},
render:function(){
return (
<form onSubmit={this.submitHandler}>
<select multiple="true" value={this.state.options} onChange={this.handleChange}>
<option value="A">First Option</option>
<option value="B">Second Option</option>
<option value="C">Third Option</option>
</select>
<br/>
<button type="submit">Speak</button>
</form>
);
} }); //将组件加到对应的元素上
React.render( <MySelect />, document.getElementById('example') );
</script>
</body>
</html>
注意:
1.使用React里面的值作为html动态的值的时候不要给值添加引号如: value="{this.state.options}" 或者onChange="{this.handleChange}",这两种写法都是错的。
React(0.13) 定义一个多选的组件的更多相关文章
- React(0.13) 定义一个checked组件
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- React(0.13) 定义一个动态的组件(属性)
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- React(0.13) 定义一个使用动画
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- React(0.13) 定义一个input组件,使其输入的值转为大写
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- React(0.13) 定义一个动态的组件(注释,样式)
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- React(0.13) 定义一个动态的组件(函数作为动态的值)
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- React(0.13) 定义一个动态的组件
1.因为jsx将两个花括号之间的内容渲染为动态值,只需要引用对应的变量即可 <!DOCTYPE html> <html> <head> <title>R ...
- React(0.13) 组件的组合使用
<html> <head> <title>组件的组合调用</title> <script src="build_0.13/react.m ...
- 怎么定义一个自己的vue组件
1.在src文件夹中创建一个hello文件夹,然后创建hello.js和hello.vue 2.hello.vue代码如下 <template> <button>这是hello ...
随机推荐
- mac sierra 10.12部分注册机Special-K+CORE Keygen不能运行的问题
自从mac升级到了sierra之后,很多注册机都打不开了,于是,我想尽了很多办法之后,终于搞定. 1.国外的大神,开发了一个软件,可以修复你的破解补丁,操作方法如下: 下载软件 http://bbs. ...
- C++ REST SDK i
Welcome! The C++ REST SDK is a Microsoft project for cloud-based client-server communication in nati ...
- 修改linux的时间可以使用date指令
修改linux的时间可以使用date指令 修改日期: 时间设定成2009年5月10日的命令如下: #date -s 05/10/2009 修改时间: 将系统时间设定成上午10点18分0秒的命令如下. ...
- ArcGIS 后台服务器抛出异常
ArcGIS工具箱是一个非常经典的工具应用,它就像一个做过很多项目.技术不断丰富的大神.以至于,现在ESIR与ITT公司合作,搞得新版的ENVI都有工具箱这样的界面了. 抛出异常 并不是每一个问题都能 ...
- PowerDesigner添加表注释
之前同事用PowerDesigner 建立数据模型后,生成到数据库中,没有注释.这导致数据库使用起来不是很方便,特别是对数据表结构不熟悉的同事. 其实,可以添加注释(并且可以逆向,即从数据库中反向更新 ...
- 微信小程序 - 浮层引导(示例)
更新日期: 2019/3/15:首次发布,具体请下载:demo.
- intellij idea 插件安装、卸载
windows 下 intellij idea 插件安装.卸载 安装(在线安装): 根据图一.图二所示(蓝色标记) 卸载: 根据图一所示(橙色标记) 启用.关闭插件: 根据图一所示(绿色标记) 安 ...
- SQL Server排序规则不一致 - Collate Database_Default
http://www.cnblogs.com/chencidi/archive/2014/07/02/3820386.html 使用多库查询时会出现排序规则冲突的问题 解决办法 在字段后面添加Coll ...
- 图解VC++ opengl环境配置和几个入门样例
VC6下载 http://blog.csdn.net/bcbobo21cn/article/details/44200205 demoproject和glut库下载 http://pan.baidu. ...
- Percona-XtraBackup系列三:增量备份恢复
1:创建测试表和测试库如果需要快速建立测试表和库的话,参考之前写的这篇博客:http://www.cnblogs.com/xiaoit/p/3376685.html create database b ...