<!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) 定义一个多选的组件的更多相关文章

  1. React(0.13) 定义一个checked组件

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  2. React(0.13) 定义一个动态的组件(属性)

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  3. React(0.13) 定义一个使用动画

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  4. React(0.13) 定义一个input组件,使其输入的值转为大写

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  5. React(0.13) 定义一个动态的组件(注释,样式)

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  6. React(0.13) 定义一个动态的组件(函数作为动态的值)

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  7. React(0.13) 定义一个动态的组件

    1.因为jsx将两个花括号之间的内容渲染为动态值,只需要引用对应的变量即可 <!DOCTYPE html> <html> <head> <title>R ...

  8. React(0.13) 组件的组合使用

    <html> <head> <title>组件的组合调用</title> <script src="build_0.13/react.m ...

  9. 怎么定义一个自己的vue组件

    1.在src文件夹中创建一个hello文件夹,然后创建hello.js和hello.vue 2.hello.vue代码如下 <template> <button>这是hello ...

随机推荐

  1. Everything常见问题及搜索技巧,附Demo

    1 Everything 1.1 "Everything"是什么? "Everything"是一个运行于Windows系统,基于文件.文件夹名称的快速搜索引擎. ...

  2. OPENGL: WHY IS YOUR CODE PRODUCING A BLACK WINDOW?

      Introduction One of the most common problems for novice, and sometimes experienced, OpenGL program ...

  3. [Canvas]新版箴言钟表

    动态效果点此下载用浏览器打开观看. 本作Github地址:https://github.com/horn19782016/12MaximClock 图例: 代码: <!DOCTYPE html& ...

  4. Horizon Is Easy, Horizon Is Complex

    本文出自我的同事兼基友@monsterxx03 之手,本人稍作润色 Horizon Is Easy, Horizon Is Complex 如果要用一句话来概括Openstack Dashboard项 ...

  5. hadoop环境搭建与測试

    搭建參看: http://blog.csdn.net/w13770269691/article/details/16883663/ 查看集群状态: [root@master bin]# hdfs df ...

  6. 国外某牛人的JsonModelBinder 实现 MVC 3.0

    public class JsonModelBinder : DefaultModelBinder { public override object BindModel(ControllerConte ...

  7. 如何设置Vmware下Linux系统全屏显示

    环境:Vmware10+RedHat5 在Vmware10中安装好RedHat5后,即使点击了全屏按钮(或使用快捷键Ctrl+Alt+Enter),全屏的效果依然不尽人意,跟下图中差不多,RedHat ...

  8. SHELL pv uv 统计事例

    #!/bin/sh #statistics newplive logs SOURCELOGS=$ ];then echo echo "please input file!" ech ...

  9. 海南小地图(echart)

    先看效果 这个是海南省地图: 然后看引入的html: <body class=""> <div class="container"> & ...

  10. insert-interval 插入区间

    Given a set of non-overlapping intervals, insert a new interval into the intervals (merge if necessa ...