<!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. linux里tmpfs文件系统

    linux里tmpfs文件系统 是一个虚拟内存文件系统,它不同于传统的用块设备形式来实现的Ramdisk,也不同于针对物理内存的Ramfs.Tmpfs可以使用物理内存,也可以使用交换分区. umoun ...

  2. oauth2-server-php-docs 食谱

    一步一步的演练 以下说明提供详细的演练,以帮助您启动并运行OAuth2服务器.要查看实现此库的现有OAuth2服务器的代码库,请查看OAuth2 Demo. 初始化您的项目 为您的项目创建一个目录,并 ...

  3. Android 开源项目 eoe 社区 Android 客户端

    本文内容 环境 开源项目 eoe 社区 Android 客户端 本文介绍 eoe 社区 Android 客户端.它是一个开源项目,功能相对简单,采用侧边菜单栏.可以学习一下.点击此处查看 GitHub ...

  4. 加快Android Studio的编译速度

    从Eclipse切换到Android Studio后,感觉Android Studio的build速度比Eclipse慢很多,以下几个方法可以提高Android Studio的编译速度 使用Gradl ...

  5. IIS 之 IIS 7及以上多域名或端口绑定同一物理目录并设置不同默认文档

    今天在 IIS 7 多端口或域名绑定同一物理目录,设置不同的默认文档遇到问题:同一物理目录的多个站点修改任意一个站点默认文档都会一起更改. 原因:在同一个物理目录下只有一个 web.config,并且 ...

  6. Servlet简介与生命周期

    一:Servlet是什么 Servlet是运行在Web服务器上的Java程序,作为处理来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中间层.JSP在w ...

  7. JDK提供的四种线程池

    一.线程池什么时候用,有什么好处? “线程池”顾名思义,就是存放线程的池子,这个池子可以存放多少线程取决于采用哪种线程池,取决于有多少并发线程,有多少计算机的硬件资源.使用线程池最直接的好处就是:线程 ...

  8. JUC-Condition和Lock实践-线程按序交替执行

    编写一个程序,开启 3 个线程,这三个线程的 ID 分别为 A.B.C,每个线程将自己的 ID 在屏幕上打印 10 遍,要求输出的结果必须按顺序显示.如:ABCABCABC…… 依次递归 这里只使用c ...

  9. Leveldb 使用说明文档

    Leveldb 使用说明文档 原作者:Jeff Dean, Sanjay Ghemawat 翻译:乌合之众solym@sohu.com 英文原文地址https://rawgit.com/google/ ...

  10. C#程序实现窗体的最大化/最小化

    C#程序实现窗体的最大化/最小化 http://blog.csdn.net/jiangqin115/article/details/41251215 private void button1_Clic ...