<!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. WPF 动态改变窗口大小

    1.删除 Width 和 Height 属性:2.将 Windows.SizeToContent 属性设置为 WidthAndHeight这时窗口就能自动调整自身大小,从而容纳所包含的内容. 通过将 ...

  2. Java-JUC（二）：Java内存模型可见性、原子性、有序性及volatile具有特性

    1.Java HotSpot JVM运行时数据区 Java内存模型即Java Memory Model,简称JMM.JMM定义了Java 虚拟机(JVM)在计算机内存(RAM)中的工作方式.JVM是整 ...

  3. capwap学习笔记——初识capwap（三）

    2.5.6 CAPWAP状态机详解 2.5.6.1 Start to Idle 这个状态变迁发生在设备初始化完成. ¢  WTP: 开启CAPWAP状态机.     ¢  AC:  开启CAPWAP状 ...

  4. docker service ps打印出来的错误信息被截断了怎么办？

      [解决方法] 用Format属性: 这个其实解决不了截断的问题,不过可以显示更少的列,看起来更清楚. Formatting The formatting options (--format) pr ...

  5. 编译安装openssl报错：POD document had syntax errors at /usr/bin/pod2man line 69. make: *** [install_docs]

    错误如下: cms.pod around line 457: Expected text after =item, not a number cms.pod around line 461: Expe ...

  6. Android 基本 Jackson Marshalling（serialize）/Unmarshalling（deserialize）

    本文内容 基本 Jack Marshalling 忽略属性 忽略 Null 字段 改变字段名字 基本 Jackson Marshalling 把 JSON 解析成 JsonNode Unmarshal ...

  7. Oracle导入excel数据快速方法

    Oracle导入excel数据快速方法 使用PLSQL  Developer工具,这个可是大名鼎鼎的Oracle  DBA最常使用的工具.    在单个文件不大的情况下(少于100000行),并且目的 ...

  8. HTML页面跳转的5种方式

    下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件. 1) html的实现 <head> <!-- 以 ...

  9. 带你走进EJB--将EJB发布为Webservice(3)

    在上面文章中我们讲到,通过使用用JBoss5作为EJB容器的时候,调用Web服务出现了异常. 异常信息如下: *********************** CreateWeb Service Cli ...

  10. AfterAddJS

    protected override string AfterAddJS() { return CanDoo.FineUI.Utility.AfterSaveJS_ReloadData(EntityI ...