<!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. mac sierra 10.12部分注册机Special-K+CORE Keygen不能运行的问题

    自从mac升级到了sierra之后,很多注册机都打不开了,于是,我想尽了很多办法之后,终于搞定. 1.国外的大神,开发了一个软件,可以修复你的破解补丁,操作方法如下: 下载软件 http://bbs. ...

  2. C++ REST SDK i

    Welcome! The C++ REST SDK is a Microsoft project for cloud-based client-server communication in nati ...

  3. 修改linux的时间可以使用date指令

    修改linux的时间可以使用date指令 修改日期: 时间设定成2009年5月10日的命令如下: #date -s 05/10/2009 修改时间: 将系统时间设定成上午10点18分0秒的命令如下.  ...

  4. ArcGIS 后台服务器抛出异常

    ArcGIS工具箱是一个非常经典的工具应用,它就像一个做过很多项目.技术不断丰富的大神.以至于,现在ESIR与ITT公司合作,搞得新版的ENVI都有工具箱这样的界面了. 抛出异常 并不是每一个问题都能 ...

  5. PowerDesigner添加表注释

    之前同事用PowerDesigner 建立数据模型后,生成到数据库中,没有注释.这导致数据库使用起来不是很方便,特别是对数据表结构不熟悉的同事. 其实,可以添加注释(并且可以逆向,即从数据库中反向更新 ...

  6. 微信小程序 - 浮层引导（示例）

    更新日期: 2019/3/15:首次发布,具体请下载:demo.

  7. intellij idea 插件安装、卸载

    windows 下 intellij idea 插件安装.卸载   安装(在线安装): 根据图一.图二所示(蓝色标记) 卸载: 根据图一所示(橙色标记) 启用.关闭插件: 根据图一所示(绿色标记) 安 ...

  8. SQL Server排序规则不一致 - Collate Database_Default

    http://www.cnblogs.com/chencidi/archive/2014/07/02/3820386.html 使用多库查询时会出现排序规则冲突的问题 解决办法 在字段后面添加Coll ...

  9. 图解VC++ opengl环境配置和几个入门样例

    VC6下载 http://blog.csdn.net/bcbobo21cn/article/details/44200205 demoproject和glut库下载 http://pan.baidu. ...

  10. Percona-XtraBackup系列三：增量备份恢复

    1:创建测试表和测试库如果需要快速建立测试表和库的话,参考之前写的这篇博客:http://www.cnblogs.com/xiaoit/p/3376685.html create database b ...