<body>
<!-- React 真实 DOM 将会插入到这里 -->
<div id="example"></div>

<!-- 引入 React -->
<script src="src/libs/react.js"></script>
<!-- 引入 JSX 语法格式转换器 -->
<script src="src/libs/JSXTransformer.js"></script>

<script src="src/libs/jquery.js"></script>
<!-- 注意：script 需要注明 type 为 text/jsx 以指定这是一个 JSX 语法格式 -->
<script type="text/jsx">
var Count = React.createClass({
incrementCount:function () {
this.setState({
count: this.state.count + 1
});
},
getInitialState:function(){
return {
count:0
}
},
render:function(){
return (
<div className='component'>
<h1>Count: {this.state.count}</h1>
<button type="button" onClick={this.incrementCount}>点击me</button>
</div>
);
}
})
React.render(
<Count />,
document.getElementById('example')
);
</script>
</body>

注意我上面标记的地方是不能添加分号的

JSX中的事件绑定

JSX支持事件的绑定，语法类似于HTML中事件的绑定，不同的是这里事件的名称必须按照驼峰式，例如change变成onChange,click变成onClick等。

 this.state

组件免不子要与用户互动，React的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染UI

在这模块中，有一个新的函数 getInitialState 。当模块初始化的时候，React会调用这个函数。而返回的对象则作为React的初始化状态(看函数名就知道)。

react5 事件 satate的更多相关文章

  1. JNI详解---从不懂到理解

    转载:https://blog.csdn.net/hui12581/article/details/44832651 Chap1:JNI完全手册... 3 Chap2:JNI-百度百科... 11 C ...

  2. Jquery的点击事件，三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  3. 关于 Chrome 浏览器中 onresize 事件的 Bug

    我在写插件时用到了 onresize 事件,在反复地测试后发现该事件在 Chrome 及 Opera(内核基本与 Chrome 相同,以下统称 Chrome)浏览器打开时就会执行,这种情况也许不能算作 ...

  4. MVVM设计模式和WPF中的实现（四）事件绑定

    MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

  5. C++中的事件分发

    本文意在展现一个C++实现的通用事件分发系统,能够灵活的处理各种事件.对于事件处理函数的注册,希望既能注册到普通函数,注册到事件处理类,也能注册到任意类的成员函数.这样在游戏客户端的逻辑处理中,可以非 ...

  6. 移动端IOS点击事件失效解决方案

    解决方案 解决办法有 4 种可供选择: 1 将 click 事件直接绑定到目标元素(即 .target)上 2 将目标元素换成 <a> 或者 button 等可点击的元素 3 将 clic ...

  7. Android笔记——Button点击事件几种写法

    Button点击事件:大概可以分为以下几种: 匿名内部类 定义内部类,实现OnClickListener接口 定义的构造方法 用Activity实现OnClickListener接口 指定Button ...

  8. HTML 事件(一) 事件的介绍

    本篇主要介绍HTML中的事件知识:事件相关术语.DOM事件规范.事件对象. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三 ...

  9. HTML 事件(二) 事件的注册与注销

    本篇主要介绍HTML元素事件的注册.注销的方式. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流.事件委托 4. ...

随机推荐

  1. Centos 反向代理创建资料

    1. yum update 2. sh centos.sh 3. sh upgrade_nginx.sh nginx 1.7.0 4. cd /usr/local/nginx/conf/ upload ...

  2. js选择器

    原生JS选择器有getElementById.getElementsByName.getElementsByTagName和getElementsByClassName这四个,下面我就一个一个介绍这四 ...

  3. <转>简单之美——系统设计黄金法则

    作者: 包云岗  发布时间: 2012-05-19 13:06  阅读: 3036 次  推荐: 1   原文链接   [收藏] 最近多次看到系统设计与实现的文章与讨论,再加上以前读过的其他资料以及自 ...

  4. CDATA为何物？

    CDATA的解释 1. 术语 CDATA 指的是不应由 XML 解析器进行解析的文本数据(Unparsed Character Data),XHTML也是如此. CDATA 部分中的所有内容都会被解析 ...

  5. IOS竖屏应用单个页面横屏的解决办法

    昨天朋友问我,怎么实现在竖屏的应用里,显示一个横屏的应用,由于也没做过 就说不知道了,但是我觉得会有这样的API ,因为我手机里就安装有这种类型的软件 今天早上起来,就想做一个Demo出来,惯例的是查 ...

  6. MFC 关于如何实现浏览文件

    在做界面的时候,如果涉及到文件,就要输入文件的地址 第一种方法是直接输入,嗯...╮(￣▽￣)╭ 第二种方法就是常见的浏览,然后选择文件<(￣︶￣)/ 其代码如下: CString filena ...

  7. [Leetcode][JAVA] Minimum Depth of Binary Tree && Balanced Binary Tree && Maximum Depth of Binary Tree

    Minimum Depth of Binary Tree Given a binary tree, find its minimum depth. The minimum depth is the n ...

  8. mingw编译rtmp库

    下载rtmpdump-2.4 进到里面的librtmp目录下面,执行命令:make SYS=mingw CRYPTO= 这样就编译成功静态库和动态库,如何安装到/usr/local/下面? 执行命令: ...

  9. eclipse maven testng

    安装过程: 1.eclipse官网下载:

  10. C#基于Socket的简单聊天室实践

    序:实现一个基于Socket的简易的聊天室,实现的思路如下: 程序的结构:多个客户端+一个服务端,客户端都是向服务端发送消息,然后服务端转发给所有的客户端,这样形成一个简单的聊天室功能. 实现的细节: ...