<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. 使用html2canvas实现网页截图并嵌入到PDF

    以前我们只能通过截图工具进行截取图像.这使得在业务生产中,变得越来越不方便.目前的浏览器功能越来越强大,H5也逐渐普及,浏览器也可以实现截图了.这里来聊下之前在工作中用到的html2canvas.这里 ...

  2. 什么是SQL注入

    一种简单的web应用架构,: 表示层(web浏览器或呈现引擎)———>逻辑层(如C#,ASP,.NET,PHP,JSP等编程语言)———>存储层(如Microsoft SQL Server ...

  3. JSON: Property 'xxx' has no getter method的解决办法

    在使用JSONArray.fromObject时候出现JSONException:Property 'xxx' has no getter method. 解决办法:设置bean为public属性即可 ...

  4. 使用Prism6 建立 Windows 10 通用程序.

    使用Prism6 建立 Windows 10 通用程序. 目标: 使用prism6,建立Windows 通用程序项目. 1, 解决方案—添加新建项目—通用—空白应用—输入名称—确定—确定 2 ,引用上 ...

  5. <Data Structure and Algorithm>排序算法

    排序稳定:如果两个数相同,对他们进行的排序结果为他们的相对顺序不变.例如A={1,2,1,2,1}这里排序之后是A = {1,1,1,2,2} 稳定就是排序后第一个1就是排序前的第一个1,第二个1就是 ...

  6. SSM+DUBBO/ZK异常

    1.Could not find resource(mybatis本身不支持通配符,是spring提供的ant匹配法) 2.ClassNotFoundException: org.I0Itec.zkc ...

  7. easyui 》 radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中

    获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val();获取select被选中项的文本var item = $(" ...

  8. windows编程：第一个windows程序

    #define WIN32_LEAN_AND_MEAN #include <windows.h> #include <windowsx.h> #include <math ...

  9. 利用反射实现类通用的DAO层

    public void add(Object object) throws SQLException { ResultSet rs=null; PreparedStatement ps=null; C ...

  10. JavaScript 基础第四天

    一.前言 昨天我们了解了Js的很重要的一个概念叫做函数,函数就是对于冗余和垃圾代码的一种封装机制.简单的讲就是为了能让程序更好更快的执行我们将一些重复性的代码提取,封装成一个有名字的小盒子,等到我们需 ...