<!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. Kafka：ZK+Kafka+Spark Streaming集群环境搭建（四）针对hadoop2.9.0启动执行start-all.sh出现异常：failed to launch: nice -n 0 /bin/spark-class org.apache.spark.deploy.worker.Worker

    启动问题: 执行start-all.sh出现以下异常信息: failed to launch: nice -n 0 /bin/spark-class org.apache.spark.deploy.w ...

  2. The future of scripting in Unity

    Recently we talked about Unity and WebGL . In that post we briefly spoke about how scripting works i ...

  3. IncrediBuild 2.40 过期时间

    IncrediBuild 2.40的License有2个文件CoordLicense.dat和AgentLicense.dat,分别位于Coordinator和Agent安装目录下,这两个文件都是RS ...

  4. moodle安装体验

    EasyPHP-5.3.8.0+moodle 2.6.2 安装过程要耐心等待. 成功安装后.网页又訪问不了. 不知道为什么? 2015/04/12 EasyPHP-DevServer-14.1VC11 ...

  5. ASP入门（十五）- Global.asa

    Global.asa 文件是一个可选文件,它可包含被 ASP 应用程序中每个页面访问的对象.变量和方法的声明.所有合法的浏览器脚本都可以在 Global.asa 中使用. Global.asa 文件只 ...

  6. （纪录片）《星际穿越》中的科学 The Science of Interstellar

    简介: 导演: Gail Willumsen编剧: Gail Willumsen主演: 克里斯托弗·诺兰 / 乔纳森·诺兰 / 基普·索恩 / 马修·麦康纳类型: 纪录片 / 短片制片国家/地区: 美 ...

  7. npm配置镜像、设置代理

    配置镜像 by config command npm config set registry http://registry.cnpmjs.orgnpm info underscore (如果上面配置 ...

  8. java class 文件

    class 文件是什么 1).是对一个java类或一个java接口的全面描述:2).是对java程序二进制文件格式的精确定义:3).一个class文件中只能包含一个类或接口:4).作为程序传给jvm的 ...

  9. Mycat读写分离、主从切换学习（转）

    http://blog.csdn.net/zhanglei_16/article/details/50707487 Mycat读写分离.主从切换学习问题一:分表.分库的优缺点,以及分表无法成为主流分表 ...

  10. HTML DOM defaultValue 属性

    定义和用法 defaultValue 属性设置或返回文本框的初始内容. 注释:文本框的初始值是位于 <textarea> 和 </textarea> 标签之间的文本.在表单被重 ...