<!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. （转）Unity3D工程版本管理方案

    自:http://blog.dou.li/unity3d%E5%B7%A5%E7%A8%8B%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86%E6%96%B9%E6%A1%88 ...

  2. [Functional Programming] Introduction to State, thinking in State

    Recently, I am learning Working with ADT. Got some extra thought about State Monad. Basiclly how to ...

  3. Python爬虫实战（一）：爬糗事百科段子

    代码: # _*_ coding:utf-8 _*_ import urllib2 import re from datetime import datetime class QSBK: def __ ...

  4. 关于 URL 编码及 JavaScript 编码函数【转载+整理】

    原文地址:http://www.ruanyifeng.com/blog/2010/02/url_encoding.html 本文内容 引入 环境 测试 JavaScript 编码函数   引入 URL ...

  5. 牛客网-《剑指offer》-用两个栈实现队列

    题目:http://www.nowcoder.com/practice/54275ddae22f475981afa2244dd448c6 C++ class Solution { public: vo ...

  6. 使用Jmeter对API进行性能测试

    先补充刚才测试的部分截图余下,后续详细补充内容. API Test.jmx 如下: <?xml version="1.0" encoding="UTF-8" ...

  7. Android 如何预置APK M

    前言          欢迎大家我分享和推荐好用的代码段~~ 声明          欢迎转载,但请保留文章原始出处:          CSDN:http://www.csdn.net        ...

  8. MongoDB numa系列问题一：[initandlisten] connection refused because too many open connections:

    1:Mongod日志有很多这样的报错: [initandlisten] connection refused because too many open connections: 2:查看系统的限制 ...

  9. http put post请求区别

    1.RESTful API REST: Representational State Transfer url 对应服务器上的一种资源,e.g. 数据,图片等,所以url 中只含有名词,通过HTTP动 ...

  10. Ulua_toLua_基本案例（二)_ScriptsFromFile

    在Untiy中用Lua.必需要LuaInterface. LuaInterface的介绍请看:点击打开链接 能够先光写Lua,生成.lua的纯文件. 再Unity中通过,luaState.DoFile ...