<!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. ASP.NET压力测试

    本文导读:对于直接面对互联网用户的WEB应用,在开发设计的时候必须格外小心,因为谁也不知道在单位时间内WEB程序访问和运行的速度.所以,在程序设计完成以后,最后针对程序进行一些严格的甚至是苛刻的测试, ...

  2. SharpDX之Direct2D教程I——简单示例和Color(颜色)

    研究Direct2D已经有一段时间了,也写了一个系列的文章 Direct2D ,是基于Windows API Code Pack 1.1.在前文 Direct2D教程VIII——几何(Geometry ...

  3. (纪录片)鸟瞰中国 China from Above

    简介: 类型: 纪录片官方网站: natgeotv.com/uk/china-from-above制片国家/地区: 美国语言: 英语集数: 2单集片长: 44分钟IMDb链接: tt4872012 主 ...

  4. java class 文件

    class 文件是什么 1).是对一个java类或一个java接口的全面描述:2).是对java程序二进制文件格式的精确定义:3).一个class文件中只能包含一个类或接口:4).作为程序传给jvm的 ...

  5. java报错综合

    1.java.lang.NoSuchMethodError: antlr.collections.AST.getLine()I 方法一:这是因为在struts2自带的antlr-2.7.2.jar包的 ...

  6. [精品]CAD批量处理工具

     需要此工具请Q:3567 618 336 CAD批量处理工具是基于AutoCAD二次开发的批处理插件.将程序加载到CAD中,使用自定义的Lisp代码就可对多个文档进行批量操作. 1.文件说明 CAD ...

  7. LintCode: Median of two Sorted Arrays

    求第k个值 1.归并排序 归并到第k个值为止 时间复杂度:O(k) class Solution { public: // merge-sort to find K-th value double h ...

  8. Django模板过滤器详解

    Django 模板过滤器也是我们在以后基于 Django 网站开发过程中会经常遇到的,如显示格式的转换.判断处理等.以下是 Django 过滤器列表,希望对为大家的开发带来一些方便. 一.形式:小写 ...

  9. angularJS 事件广播与接收[转]

    路由的事件 事件这个词在前端出现的频率真是高,根本拦不住,哪都是.$route服务在路由过程中的每个阶段都会触发不同的事件,可以为这些不同的路由事件设置监听器并做出响应. 一共有4个事件用来监听路由的 ...

  10. 转:nginx基础概念(connection)

    在nginx中connection就是对tcp连接的封装,其中包括连接的socket,读事件,写事件.利用nginx封装的connection,我们可以很方便的使用nginx来处理与连接相关的事情,比 ...