<!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. guns使用注意问题

    guns使用注意问题 1,创建的表必须有注释,这样自动生成代码有标题: 2,必须先构建好结构,后期修改主菜单会产生异常的结构影响: 3,修改菜单编号容易产生异常问题: 4,如果没有id,不会自动生成增 ...

  2. Flask的集中控制

    想通过一个统一的机制,同时允许一些公共的逻辑 {% if args["NoUser"] %} 无用户! {% else %} <!DOCTYPE html PUBLIC &q ...

  3. Dubbo-Fail to decode request due to: RpcInvocation

    使用Dubbo进行服务化,遇到如下错误: Caused by: com.alibaba.dubbo.remoting.RemotingException: Fail to decode request ...

  4. Wifidog的协议梳理

    上篇文章结合wifidog的协议,讲解了如何实现wifi认证.这篇文章会详细讲解一下wifidog的协议. wifidog的认证流程图 用户连接WIFI会跳转到以下地址: 1 2 3 4 5 6 7 ...

  5. OCIEnvCreate 失败，返回代码为 -1的解决方法

    错误描述 连接Oracle始终报这个错误: {System.Exception: OCIEnvCreate 失败,返回代码为 -1,但错误消息文本不可用 本机环境是oracle10g客户端,以前也连过 ...

  6. message sent to deallocated instance

    在XCode的以前版本中,如果遇到了 [代码]c#/cpp/oc代码: 1 message sent to deallocated instance 0x6d564f0 我们可以使用info mall ...

  7. linphone

    官方网站 源码下载: linphone, including: oRTP mediastreamer2 liblinphone linphonec linphone (gtk) git clone g ...

  8. HTTPS与HTTP协议区别

    1.主要区别 (1)超文本传输协议HTTP,HTTP下加入SSL层(位于传输层)的安全协议. (2)HTTP端口为80,HTTPS端口是443. 2.HTTPS通信过程 https 通信传输过程:

  9. Maven让资源文件处理插件能够解析资源文件中的Maven属性

    <build> <resources> <resource> <directory>${project.basedir}/src/main/resour ...

  10. 〖Linux〗Linux高级编程 - 进程间通信（Interprocess Communication）

    [转自: http://blog.csdn.net/Paradise_for_why/article/details/5550619] 这一章就是著名的IPC,这个东西实际的作用和它的名字一样普及.例 ...