<!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. guava 学习笔记 瓜娃（guava）的API快速熟悉使用

    1,大纲 让我们来熟悉瓜娃,并体验下它的一些API,分成如下几个部分: Introduction Guava Collection API Guava Basic Utilities IO API C ...

  2. WPF编程：textbox控件文本框数据显示最后一行

    WPF编程:textbox控件文本框数据显示最后一行 TextBox控件在接收大量数据的时候,滚动条一般在最上方,如何使滚动条随着数据的接收而向下滚动呢?比如有一个TextBox'控件txbRecvD ...

  3. Windows 之 可以Ping通服务器但无法使用服务器连接的共享打印机

    故障现象:一个公司内部局域网中,一台电脑可以Ping通服务器,但无法使用服务器连接的共享打印机. 故障分析与排除:根据故障现象分析,由于客户端可以Ping通服务器,说明网络连接正常,故障可能是由客户端 ...

  4. 【树莓派】使用VNC远程登录树莓派的图形界面

    我自己本人使用树莓派,就是ssh连接操作:但是由于实施的部分同学不熟悉Linux命令行操作,虽然之前我给搞过teamviewer方式,但是对他们而言,还是有点复杂,他们也不喜欢不熟悉用ssh,所以我尝 ...

  5. vsphere storage appliance工作原理和实施

    摘录自:http://www.07net01.com/storage_networking/VMwarexunihuazhiVSA_vSphere_Storage_Appliance_qunji_yi ...

  6. IDEA中Gradle插件的使用

    Idea本身已经集成了Gradle插件,你可以在File | Settings | Build, Execution, Deployment | Build Tools | Gradle 下找到 相关 ...

  7. python乱码问题之爬虫篇

    UnicodeDecodeError: 'gbk' codec can't decode byte 0xae in position 167: illegal multibyte sequence 使 ...

  8. 算法笔记_225:数字密码发生器(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 在对银行账户等重要权限设置密码的时候,我们常常遇到这样的烦恼:如果为了好记用生日吧,容易被破解,不安全:如果设置不好记的密码,又担心自己也会忘记:如 ...

  9. 从0開始写MyScrollView

    从0開始写MyScrollView 上篇文章对ScrollView的详细实现进行了分析.本文依据上篇分析的结果.自己动手写一个ScrollView. step1 尾随手指滑动,非常easy.重写2个函 ...

  10. SCD Type2 in ODI

    缓慢变化维(Slowly changing Dimensions)指的是维表中的维度字段值会随着时间或业务调整,而在后续的分析中,历史数据仍然要使用旧的维度值,新的数据会使用当前维度值.在数据仓库建设 ...