<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. oracle 小题

    create table student(sno varchar2(10) primary key,sname varchar2(20),sage number(2),ssex varchar2(5) ...

  2. 【如何在mysql 官网下载最新版本mysql 数据库】

    方法/步骤   打开百度搜索,输入MySQL,第一个是MySQL官网   点击第一个链接地址,进入MySQL官方网站,单击“Downloads”下载Tab页,进入下载界面   找到Community( ...

  3. C++单元测试 之 gtest -- 组合数计算.

    本文将介绍如何使用gtest进行单元测试. gtest是google单元测试框架.使用非常方便. 首先,下载gtest (有些google项目包含gtest,如 protobuf),复制目录即可使用. ...

  4. Ubuntu 12.04 安装MySQL

    本文地址:http://www.cnblogs.com/yhLinux/p/4012689.html 本文适合新手入门. 本文是对 Ubuntu 12.04 环境下安装 MySQL 的记录,通过这两天 ...

  5. 为什么一个类的全局变量默认以m开头？

    某天闲着无聊,突然想起来为什么大家都习惯将全局变量使用m开头,于是追根求源,查了一些资料,虽然并不是我想要的,但是也总结一下. 在stackoverflow上就有人问: Why do most var ...

  6. js在head里插入style样式

    代码如下: var nod = document.createElement('style'), str = 'body{background:#000;color:#fff} a{color:#ff ...

  7. 关于合并“.a”文件时遇到的问题

    今天在给工程添加百度地图SDK时,涉及到百度地图的模拟器与真机环境下的.a文件的合并,在使用终端进行 合并时,出现: xcrun: error: active developer path (&quo ...

  8. Android 下进行单元测试 Test run failed：Instrumentation run failed due to 'java.lang.ClassNotFoundException'

    废话不说,一直报错.网上介绍的都是缺少如下声明之类. 但注意的是工程配置是导出junit包, 路径为  project上右键 --> properties -> java build pa ...

  9. 无法将类型为“System.Decimal”的对象强制转换为类型“System.Char[]”。

    在用微软的SSIS操作ORACLE 数据源的时候碰到以下报错信息: [ADO NET Destination [13455]] 错误: 数据插入期间出现异常,从提供程序返回的消息为:无法将类型为&qu ...

  10. static关键字作用总结

    之前讲到final关键字的作用是每次面试的时候我必问求职者的两个问题之一,另外一个问题就是文本会写到的static.final和static一样,都是一个小问题可以看到一个人的基础是否扎实以及平时是否 ...