<!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 Checked = React.createClass({

                    //给他一个初始值

                    getInitialState:function(){

                        return {checked:true};

                    },

                    //有改变的时候

                    handleChange:function(event){

                        this.setState({checked:event.target.checked});

                    },

                    //提交

                    submitHandler:function(event){

                        event.preventDefault();

                        alert(this.state.checked);

                    },

                    //渲染html

                    render:function(){

                        return (

                            <form onSubmit={this.submitHandler} >

                                <input type="checkbox" value="A" checked={this.state.checked} onChange={this.handleChange} />

                                <br/>

                                <button type="submit">speak</button>

                            </form>

                        );

                    }

                });

            //将组件加到对应的元素上

            React.render( <Checked />, document.getElementById('example') );

        </script>

    </body>

</html>

React(0.13) 定义一个checked组件的更多相关文章

  1. React(0.13) 定义一个input组件，使其输入的值转为大写

    <!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) 定义一个动态的组件(注释，样式)

    <!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) 定义一个动态的组件

    1.因为jsx将两个花括号之间的内容渲染为动态值,只需要引用对应的变量即可 <!DOCTYPE html> <html> <head> <title>R ...

  7. React(0.13) 定义一个使用动画

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  8. React(0.13) 组件的组合使用

    <html> <head> <title>组件的组合调用</title> <script src="build_0.13/react.m ...

  9. Android开发 ---基本UI组件6 ：只定义一个listView组件，然后通过BaseAdapter适配器根据数据的多少自行添加多个ListView显示数据

    效果图: 1.activity_main.xml 描述: 定义了一个按钮 <?xml version="1.0" encoding="utf-8"?> ...

随机推荐

  1. Java Web 生成临时文件并下载（原）

    概述:本文是  java 服务器端生成文件并下载的示例,并不完善,下载之后一般来说还需要删除临时文件. 注意:临时文件存放在 /WEB-INF/tmp 目录下,所以先要把  tmp 目录建起来. pu ...

  2. 在Linux下锁住键盘和鼠标而不锁屏

    假如在你正看着屏幕上的某些重要的事情时,你不想让你的小猫或者小狗在你的键盘上行走,或者让你的孩子在键盘上瞎搞一气,那我建议你试试 xtrlock 这个工具. 假如在你正看着屏幕上的某些重要的事情时,你 ...

  3. 关于ThinkPhp中getField方法存在的问题

    在ThinkPhp中我们可以通过以下方式获取数据库数据 query:直接执行SQL查询操作 find:查询单选数据集 getField查询字段值 select:查询数据集 其他......   但今天 ...

  4. Magento错误 Illegal scheme supplied, only alphanumeric characters are permitted

    1.检查表core_config_data 'web/unsecure/base_url' 和'web/secure/base_url' 的值是否是正确的链接地址 2.删除系统目录var下所有子目录及 ...

  5. 7.4 Javascript:表单验证-揭开正則表達式的面纱

    用元字符匹配对应的字符类型 创建正則表達式有点像创建字符串字面量,仅仅只是正則表達式出如今一对"/"里 正則表達式中会用到一级元字符.用于连接字母与数字 "." ...

  6. Flask传递中文URL时的问题

    在非IE浏览器上都很好,几乎不用处理,但IE不行,学习了半天,有以下要点: 1.Meta如果设置了编码,如UTF8,浏览器都将中文转码发送,但IE不会! <meta http-equiv=&qu ...

  7. C# winForm webBrowser页面中js调用winForm类方法(转)

      有时我们在winform项目中嵌入了网页,想通过html页面调用后台方法,如何实现呢?其实很简单,主要有三部:   1.在被调用方法类上加上[ComVisible(true)]标签,意思就是当前类 ...

  8. JavaScript String 对象扩展方法

    /** 在字符串末尾追加字符串 **/ String.prototype.append = function (str) { return this.concat(str); } /** 删除指定索引 ...

  9. JAVA设计模式（全部）

    一篇一篇的重写意义不大,不如把整个PDF文档上传上来看着方便,下载链接

  10. SHELL pv uv 统计事例

    #!/bin/sh #statistics newplive logs SOURCELOGS=$ ];then echo echo "please input file!" ech ...