<!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. Spring Boot集成持久化Quartz定时任务管理和界面展示

    本文是对之前的一篇文章Spring+SpringMVC+mybatis+Quartz整合代码部分做的一个修改和补充, 其中最大的变化就是后台框架变成了Spring Boot. 本工程所用到的技术或工具 ...

  2. 如何在Centos7上安装和使用ZFS

    导读 ZFS文件系统的英文名称为ZettabyteFileSystem,也叫动态文件系统(DynamicFileSystem),是第一个128位文件系统.最初是由Sun公司为Solaris10操作系统 ...

  3. Simple XOR Encryption/Decryption in C++ (And Several Other Languages)

    For details on how to implement XOR encryption using Go, see this post. If you are looking for XOR e ...

  4. hadoop集群配置SSH免登陆

    今天给大家总结一下hadoop集群之间免登陆的步骤 node1 ssh node4 1.在node1中生成密钥 [root@node1 ~]# ssh-keygen -t dsa -P '' -f ~ ...

  5. 在linux 中wget 无法解析主机

    vim /etc/resolv.cof 在里面加入节点 nameserver 8.8.8.8 / nameserver 8.8.4.4 即可 失败时: 成功时:

  6. PHPUnit单元测试

    单元测试 PHPUnit <?php /** * 定义一个用来被测试的类RemoteConnect * @author json * */ class RemoteConnect{ public ...

  7. Windows 下 Git 安装与初始配置

    官方下载地址:https://git-scm.com/download/win,我下载的最新版是 Git-2.15.1.2-64-bit.exe . Windows 下安装步骤 1.相关信息,直接“ ...

  8. 【转】一些linux基础命令

    学习Linux,其实很多基础命令很重要. 不论多么复杂的shell或者命令组合,都是一个一个的拼接组合命令拼接而成: 大号一个基本功,遇到需要的场景,信手拈来,随意组合拼接,是非常重要的. 恰好看到一 ...

  9. Jmeter AbstractJavaSamplerClient 案例

    1:首先到apache-jmeter-3.0\lib\ext目录下引用以下两个jar包到Java工程里面 ApacheJMeter_core.jar ApacheJMeter_java.jar 2:新 ...

  10. Python学习笔记八：ORM框架SQLAlchemy

    一:SQLAlchemy使用 1:实体类的创建 ORM中的实体类与一般的Python类不同,在其中,使用 __tablename__=""指明该类与数据库中某个表相对应,然后定义一 ...