<!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. sort命令的使用，结合uniq, awk等

    这条命令的意思:lastb | awk -F " " '{print $3}' | sort | uniq -c | sort -k1,1nr > output.log 过滤 ...

  2. error MSB6006: "CL.exe" exited with code -1073741819.

    编译一个c++项目的时候,会报如下的错误,总是无法编译,是怎么回事? error MSB6006: "CL.exe" exited with code -1073741819. 搜 ...

  3. oauth2-server-php-docs 存储 学说2

    学说2 创建客户端和访问令牌存储 要把学说融入到你的项目中,首先要建立你的实体.我们先从客户端,用户和访问令牌模型开始: yaml YourNamespace\Entity\OAuthClient: ...

  4. ASP入门（一）环境的搭建

    突然转战ASP是因为,手头要实现一个类似管理系统的东东,正好把ASP再从头学习一下下. ASP可以做什么? ASP,它的原文是 Active Server Pages . ASP最核心的扩展内容:Ac ...

  5. ZH奶酪：HTML元素文本溢出显示省略号(...)

    一 单行文本 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow 属性规定当内容溢出元素框时发生的事情. ...

  6. Mysql删除所有表

    SELECT CONCAT('DROP TABLE IF EXISTS ', table_name, ';') FROM information_schema.tables WHERE table_s ...

  7. WIP 004 - Quote/Policy Search

    Please create the search form Auto complete for first name and last name Related tables System_LOBs ...

  8. 定制保存top输出信息的格式详解

    top命令的重要性和使用方法不多说了,这里终点讨论如何保存top命令的输出信息.     保存top命令的输出到一个文件的方法是:top -n1b > topinfo.txt,这没什么好奇的,但 ...

  9. Windows Python+Eclipse环境配置

    参考这几篇博客: 1:http://www.cnblogs.com/realh/archive/2010/10/04/1841907.html 2:http://www.cnblogs.com/min ...

  10. cache-control 缓存

    1.服务端设置 2. 3.所以一般设置css/js等静态文件加一个md5码. 4.优先级问题 如果服务器端同时设置了Etag和Expires 时,Etag原理同样,即与Last-Modified/Et ...