1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>React JS</title>
  5.         <script src="../build_0.13/react.js"></script>
  6.         <script src="../build_0.13/JSXTransformer.js"></script>
  7.     </head>
  8.     <body>
  9.         <div id="example">
  10.  
  11.         </div>
  12.  
  13.         <script type="text/jsx">
  14.             var MySelect = React.createClass({
  15.                     //初始化组件的值
  16.                     getInitialState:function(){
  17.                         return {options:['B']};
  18.                     },
  19.                     handleChange:function(event){
  20.                         var checked = [];
  21.                         var sel = event.target;    //获取当前的DOM对象
  22.                         for(var i=0; i<sel.length; i++){
  23.                             var option = sel.options[i];
  24.                             if(option.selected){
  25.                                 checked.push(option.value);
  26.                             }
  27.                         }
  28.                         //设置options的值
  29.                         this.setState({
  30.                             options:checked
  31.                         });
  32.                     },
  33.                     submitHandler:function(event){
  34.                         event.preventDefault();    //阻止事件发生
  35.                         alert(this.state.options);
  36.                     },
  37.                     render:function(){
  38.                         return (
  39.                             <form onSubmit={this.submitHandler}>
  40.                                 <select multiple="true" value={this.state.options} onChange={this.handleChange}>
  41.                                     <option value="A">First Option</option>
  42.                                     <option value="B">Second Option</option>
  43.                                     <option value="C">Third Option</option>
  44.                                 </select>
  45.                                 <br/>
  46.                                 <button type="submit">Speak</button>
  47.                             </form>
  48.                         );
  49.                     }
  50.  
  51.                 });
  52.  
  53.             //将组件加到对应的元素上
  54.             React.render( <MySelect />, document.getElementById('example') );
  55.         </script>
  56.     </body>
  57. </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. SharePoint 2010/2013: List view Lookup threshold uncovered

    SharePoint with Large lists is common scenario in any Sharepoint deployment. While there are Several ...

  2. C++ 容器元素的存储和获取

    1.存储对象,存储的是对象的副本,并不是原对象.2.获取对象,获取的是对象的引用,为什么要这样设计?a.存储对象只发生一次,而获取对象往往会有多次,获取对象,如果每次都返回对象的副本,这个开销很大.b ...

  3. 程序员的福音，AI可以自动修复bug了！

    人工智能完全学会自己编程,可能说起来还有一种科幻感,但 AI 帮程序员找 bug 这件事,已经达到了不错的水平. 北京大学.微软亚洲研究院和中国电子科技大学就一起尝试着让 AI 找 bug.微软亚洲研 ...

  4. Linux netstat命令介绍

    关注Linux的系统状态,主要从两个角度出发,一个角度是系统正在运行什么服务(ps命令):另外一个就是有什么连接或服务可用(netstat命令).netstat还可以显示ps无法显示的.从inetd或 ...

  5. 微信小程序 - 提示消息组件

    配置挺简单的,也就不说明了,点击下载:alert

  6. Postgresql中的数据类型大全

    一.数值类型: 下面是PostgreSQL所支持的数值类型的列表和简单说明: 名字 存储空间 描述 范围 smallint 2 字节 小范围整数 -32768 到 +32767 integer 4 字 ...

  7. string int 类型转换

    string  int  类型转换 (int) 此方法不适用于将string 转换为int 只能转换数值类型为int 而不能转换引用类型 不会四舍五入 直接去掉小数位 Conver.ToInt() 会 ...

  8. sell 创建项目

    1.数据操作软件 2.创建项目 3.mevan 镜像

  9. 如何去掉browserLinkSignalR

    在使用vs开发时查看源代码可以发现最下面有以下代码,此段代码会一直请求网络,感觉不爽的可以这样去掉: <!-- Visual Studio Browser Link --> <scr ...

  10. django之创建第7个项目-url配置

    1.配置urls.py from django.conf.urls import patterns, include, url #Uncomment the next two lines to ena ...