<!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. SQL-根据多个条件更新数据

    根据多个条件更新数据 UPDATE sphwph SET BKXSHL=t2.BKXSHL FROM sphwph t1,sphwph_170420 t2 --(SELECT a.* FROM dbo ...

  2. WordPress 获取指定分类ID的分类信息

    get_term:直接从数据库中获取分类信息get_the_category:使用post_id作为参数,先根据post_id查询对应的文章然后再返回对应的分类信息,如果没有文章信息则返回Null 之 ...

  3. （转）Esfog_UnityShader教程_UnityShader语法实例浅析

    距离上次首篇前言已经有一段时间了,一直比较忙,今天是周末不可以再拖了,经过我一段时间的考虑,我决定这一系列的教程会避免过于深入细节,一来可以避免一些同学被误导,二来会避免文章过于冗长难读, 三来可以让 ...

  4. IT行业简报 2014-2-8

    1.微信在“我的银行卡”页面接入嘀嘀打车,三天内微信打车突破10万单,日均订单为70万,其中微信支付订单超过48万单2.三大运营商手机支付用户仅366.3万,与腾讯单月发展手机支付用户500万户相比, ...

  5. SpringMVC验证框架Validation特殊用法

    基本用法不说了,网上例子很多,这里主要介绍下比较特殊情况下使用的方法. 1. 分组 有的时候,我们对一个实体类需要有多中验证方式,在不同的情况下使用不同验证方式,比如说对于一个实体类来的id来说,保存 ...

  6. Android 之 Fagment 完全解析

    Android 上的界面展示都是通过 Activity 实现的,Activity 非常常用,不再赘述.但是 Activity 也有它的局限性,同样的界面在手机上显示可能很好看,在平板上就未必了,因为平 ...

  7. DbScopeFactory

    using (var db = DbScopeFactory.Create()) { //这里修改数据 db.SaveChanges(); }

  8. Hello World程序演示Qt项目的建立、编译、运行和发布

    一.Qt项目的建立 1.选择项目模板. 选择"文件-->新建文件或工程",在选择模板页面选择Qt C++项目中的"Qt Gui应用"一项,然后单击&quo ...

  9. 通过淘宝接口免费获取IP地址信息

    1.获取互联网访问IP信息 一般获取互联网访问的IP的相关信息一般都是收费接口,免费的接口不多,我使用到一个接口如下: http://ip.taobao.com/service/getIpInfo.p ...

  10. 使用C语言操作InfluxDB

    环境: CentOS6.5_x64 InfluxDB版本:1.1.0 InfluxDB官网暂未提供C语言开发库,但github提供的有: https://github.com/influxdata/i ...