<!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. Java归去来第1集：手动给Eclipse配置Maven环境

    一.Eclipse配置Maven 1.1.下载Maven http://maven.apache.org/download.cgi,选择对应的版本,window下载apache-maven-3.5.3 ...

  2. Chrome中的哪些端口是限制使用的？

      The following is a list of all of the restricted ports on Chrome: 1, // tcpmux 7, // echo 9, // di ...

  3. 初探iOS网络开发，数据解析。

    通过大众点评平台开发来简单了解一下,oc的网络编程和数据解析(json) 首先我们需要到大大众点评开发者平台申请一个key.http://developer.dianping.com/app/tech ...

  4. npm配置镜像、设置代理

    配置镜像 by config command npm config set registry http://registry.cnpmjs.orgnpm info underscore (如果上面配置 ...

  5. vsphere性能

    vNUMA介绍 http://virtualbarker.com/ vSphere VMware Performance With every release of vSphere the overh ...

  6. JAVA的PreparedStatement和addBatch()方法

    本文介绍两个内容,为什么使用PreparedStatement的addBatch()方法?以及使用PreparedStatement的好处. 一.addBatch使用方法 昨天用JAVA做了一个导表的 ...

  7. mysql安装后服务启动不了

    1.1 前言 最近真的是倒霉到家,装个mysql都能把所有的问题给问候了一遍······不过这也是一个宝贵的经验,得好好总结下,毕竟也不知道以后会不会再次遇到.如果有网友也能像我这样倒霉,但是能够幸运 ...

  8. 【leetcode】solution in java——Easy4

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6415011.html 16:Invert Binary Tree 此题:以根为对称轴,反转二叉树. 思路:看到 ...

  9. CentOS7中zip压缩和unzip解压缩命令详解

    安装zip.unzip应用 yum install zip unzip 以下命令均在/home目录下操作cd /home #进入/home目录1.把/home目录下面的mydata目录压缩为mydat ...

  10. Oracle单引号双重角色——字符串引用与转义

    单引号双重角色——字符串引用与转义      在ORACLE中,单引号有两个作用,一是字符串是由单引号引用,二是转义,开始学习时动态构成SQL时经常不解.单引号的使用是就近配对,即就近原则.而在单引号 ...