<!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. （转）Pixel-Fillrate显卡像素填充率

    [Pixel-Fillrate] “填充率“以每秒钟填充的像素点为单位,“三角形(多边形)生成速度“则表示每秒钟三角形(多边形)生成个数.现在的3D显卡的性能也主要看着两项指标,这两项指标的数值越大, ...

  2. 为什么有的需要安全连接的的application只有开Fiddler才好用？

      Help! Running Fiddler Fixes My App??? Over the years, the most interesting class of support reques ...

  3. Spatis service单元测试: 使用mock mapper的方式

    转载:https://blog.csdn.net/atec2000/article/details/54346242 @RunWith(MockitoJUnitRunner.class)public ...

  4. notepad++列块编辑操作

    1. 同一时候编辑连续的列区域: 鼠标先在要进行列编辑的起点点击,再同一时候按shift+alt不放,鼠标在要进行列编辑的结尾区域点击. 2. 在起点到文档结尾全部列插入数据: 鼠标先在要插入数据的位 ...

  5. Camtasia Studio CamStudio如何不录制鼠标

    在录制的小窗口中,点击Effects-Options,然后Cursor里面取消勾选Make cursor effects 可能会报错说请选择有效的声音文件   在Sound里面选择一个有效的目录,不能 ...

  6. sql语句查询某一天数据

    --如果还有今天以后的数据 --一周内呢SELECT * FROM TB WHERE datediff(dd,DATE_TIME,getdate()) between 0 and 7 --从现在起往前 ...

  7. asp.net正则表达式

    导入引用命名空间:using System.Text.RegularExpressions //Regex类,常用方法: //摘要:1.IsMatch(String);2.IsMatch(String ...

  8. bootstrap——强大的网页设计元素模板

    本文介绍一个网页设计工具——bootstrap,它包含了很多华丽的按钮及排版,我们可以在网页设计中直接使用它,尤其是加入我们只是想简单的使用一下的话,将会是一个不错的选择,下面是几张examples, ...

  9. GCC中的内嵌汇编语言

    原文可参考:GCC中的内嵌汇编语言 一.声明   虽然Linux的核心代码大部分是用C语言编写的,但是不可避免的其中还是有一部分是用汇编语言写成的.有些汇编语言代码是直接写在汇编源程序中的,特别是Li ...

  10. JAVA的Spring注入机制事例详解

    一.前言 最近使用Spring里面的依赖注入,比如StudentServiceImple2.java代码: package di.service.imple; import com.mengya.sp ...