<!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. 加快Android Studio的编译速度

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

  2. Class.isAssignableFrom(Class clz)方法 与 instanceof 关键字的区别

    Class.isAssignableFrom()是用来判断一个类Class1和另一个类Class2是否相同或是另一个类的子类或接口.   格式为:        Class1.isAssignable ...

  3. 使用jsp内置对象request获取表单提交中文内容乱码的解决办法

    page1.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pag ...

  4. 为javascript设置默认参数值

    javascript(js)中如何为函数设置默认参数值,下面提供几种方法供参考. 第一种方法: function example(a,b){ var a = arguments[0] ? argume ...

  5. MicrosoftAjax.js

    MicrosoftAjax.js下载 Function.__typeName = "Function"; Function.__class = true; Function.cre ...

  6. jQuery开发技巧

    jQuery 事件 - submit() 方法 $("form").submit(function(e){}); 当提交表单时,会发生 submit 事件. 该事件只适用于表单元素 ...

  7. Android Studio 之 Launch AVD 时" Intel HAXM is required to run this AVD, VT-x is disabled in BIOS; "

    问题描述:Launch AVD 时弹窗信息" Intel HAXM is required to run this AVD, VT-x is disabled in BIOS; " ...

  8. SQL Server从BAK文件还原新的数据库

    同一个数据库多个副本 很多时候,比如为了方便测试,排查问题,我们常常会拿到问题系统的数据库备份来开发环境下debug,这个时候就会出现同一个数据库的多个副本. 还原法 还原到一个新建的空数据库,在选项 ...

  9. 算法笔记_226:填符号凑算式(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 匪警请拨110,即使手机欠费也可拨通! 为了保障社会秩序,保护人民群众生命财产安全,警察叔叔需要与罪犯斗智斗勇,因而需要经常性地进行体力训练和智力训 ...

  10. at java.lang.AbstractStringBuilder.toString

    04-18 14:40:12.615 1210-1210/com.tongyan.lanzhou.rv I/dalvikvm: "main" prio=5 tid=1 RUNNAB ...