<!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. You must have a copy of the scp binary locally to use the scp feature

    在运行docker-machine scp 命令的时候,报错: "You must have a copy of the scp binary locally to use the scp ...

  2. 【指导】SonarQube 部署说明

    转载:https://blog.csdn.net/cuiaamay/article/details/52057091 1,安装 1.1 安装依赖 需要保证Oracle JRE 8 及以上,或者 Ope ...

  3. 阿里云centos 6安装iRedmail过程

    全新系统 yum update cd /root wget http://www.iredmail.com/iRedMail-0.8.7.tar.bz2 tar xvf iRedMail-0.8.7. ...

  4. 具体解说Android的图片下载框架UniversialImageLoader之磁盘缓存（一）

    沉浸在Android的开发世界中有一些年头的猴子们,预计都可以深深的体会到Android中的图片下载.展示.缓存一直是心中抹不去的痛.鄙人亦是如此.Ok,闲话不说.为了督促自己的学习.以下就逐一的挖掘 ...

  5. Java 面向切面编程（Aspect Oriented Programming，AOP）

    本文内容 实例 引入 原始方法 装饰者模式 JDK 动态代理和 cglib 代理 直接使用 AOP 框架--AspectWerkz 最近跳槽了,新公司使用了 AOP 相关的技术,于是查点资料,复习一下 ...

  6. 我们为什么要使用Spring Cloud？简介

    转载:https://blog.csdn.net/smallsunl/article/details/78778790 单体架构 在网站开发的前期,项目面临的流量相对较少,单一应用可以实现我们所需要的 ...

  7. 微信小程序 - async/await

    下面只是做一些介绍以及使用的原因,详情介绍还请移步博主:https://www.cnblogs.com/SamWeb/p/8417940.html regenerator-runtime下载:http ...

  8. Linux下使用Nohup后台运行程序

    一.不输出日志的命令 #!/bin/bash echo "starting nohup..." nohup dotnet ./mynetcoreapp.dll > /dev/ ...

  9. tomcat7配置

    <?xml version='1.0' encoding='utf-8'?><!-- Licensed to the Apache Software Foundation (ASF) ...

  10. sqlAlchemy学习 001

    研究学习主题 sqlAlchemy架构图 测试练习代码编写 连接数据库 看代码 db_config = { 'host': 'xxx.xxx.xxx.xx', 'user': 'root', 'pas ...