<!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. 互联网公司linux运维生产场景常用软件工具一览

    linux的世界真的很精彩,还没入门的朋友赶紧进来吧! 操作系统:Centos※,Freebsd,Ubuntu,Redhat linux,suse linux网站服务:apache※,nginx※,l ...

  2. notepad++列块编辑操作

    1. 同一时候编辑连续的列区域: 鼠标先在要进行列编辑的起点点击,再同一时候按shift+alt不放,鼠标在要进行列编辑的结尾区域点击. 2. 在起点到文档结尾全部列插入数据: 鼠标先在要插入数据的位 ...

  3. jquery效果 窗口弹出案例

    效果 ①基本效果:show().hide().toggle() ②滑动 slideDown().slideUp().slideToggle() 划上:$("p").slideUp( ...

  4. iOS9 Error Domain=NSURLErrorDomain Code=-1022 App Transport Security (ATS)

    iOS 9在HTTP 访问时会出错  iOS9 Error Domain=NSURLErrorDomain Code=-1022 这时需要修改info.plist 文件 在Info.plist中添加N ...

  5. 从C# 2.0新特性到C# 3.5新特性

    一.C# 2.0 新特性: 1.泛型 List<MyObject> obj_list=new List(); obj_list.Add(new MyObject()); 2.部分类(par ...

  6. Internet传输协议－TCP

    http://phei.eefocus.com/book/08-07/473781276058574.html http://www.eefocus.com/communication/210643 ...

  7. TaskFactory设置并发量

    Task对象很多人知道了(使用Task代替ThreadPool和Thread, C#线程篇—Task(任务)和线程池不得不说的秘密(5)) 相对的还有TaskScheduler 这个调度器,可以自定义 ...

  8. SQL Server2008为表的某列设置默认值为SQL Server函数

      例如,设置SQL Server函数GETDATE()作为默认值:

  9. JAVA 线程池入门事例

    线程池这个概念已经深入人心了,今天就是通过几个入门事例,学习一下线程池在JAVA中的应用. 一.大小固定的线程池——Executors.newFixedThreadPool() 下面咱们明确两个类: ...

  10. Customize Web Sessions List

    To customize Fiddler's Web Sessions List, add rules using FiddlerScript to the OnBeforeRequest funct ...