<!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. 如何对 GIT 分支进行规划?

    项目背景: 该项目是在2011年11月份使用Asp.net三层帮荷兰某个客户开发的机票预定系统 该客户主要是做中国与欧洲的旅行社业务,特别是最近两年由于中国的发展因此客户也越来越重视机票业务 于是他们 ...

  2. Chromium网页Layer Tree创建过程分析

    在Chromium中.WebKit会创建一个Graphics Layer Tree描写叙述网页.Graphics Layer Tree是和网页渲染相关的一个Tree. 网页渲染终于由Chromium的 ...

  3. [Spring Boot] Singleton and Prototype

    When we use Bean to do autowired, it actually use singleton, so even we create multi instanses, they ...

  4. 浅谈压缩感知（九）：正交匹配追踪算法OMP

    主要内容: OMP算法介绍 OMP的MATLAB实现 OMP中的数学知识 一.OMP算法介绍 来源:http://blog.csdn.net/scucj/article/details/7467955 ...

  5. Perl、PHP、Python、Java 和 Ruby 比较【转载+整理】

    从本文的内容上,写的时间比较早,而且有些术语我认为也不太准,有点口语化,但是意思到了. 问题: Perl.Python.Ruby 和 PHP 各自有何特点? 为什么动态语言多作为轻量级的解决方案? L ...

  6. Provide your license server administrator with the following information.error code =-42,147

    ArcEngine应用程序开发中,许可不必不可少的.一般采取两种方式来获取许可——License控件和AoInitialize类,但今天在VS2010打开程序时,隔一会弹出错误窗口:Provide y ...

  7. Java并发编程 - 基本概念

    在开始我们的并发编程前,我们必须预热一下,一些基本概念必须了解. 1. 同步(Synchronous) / 异步(Asynchronous) 同步和异步都指一次方法调用. 同步:方法开始后,调用者必须 ...

  8. 通示jQuery实例方法，未DOM对象添加多个方法

    <script type="text/javascript"> /* * 通示jQuery实例方法,未DOM对象添加多个方法 * 用按钮做多个事件的调用 */ (fun ...

  9. Java中创建访问HTTPS的自签名证书的方法

    一.问题: 常常在用java访问https的请求时,总是出现SSL禁止的异常.这里给大家教下怎么创建与添加证书. 二.工具 : 1.创建一个目录 2.去Github上搜索InstallCert,然后随 ...

  10. SHELL AWK 循环求和

    1.简单求和,文件如下: [linux@test /tmp]$ cat test 123.52 125.54 126.36 求和: [linux@test /tmp]$ awk '{sum += $1 ...