<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="js/react.js"></script>
  <script src="js/react-dom.js"></script>
  <script src="js/browser.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">
  var EventComponent = React.createClass({
    getInitialState:function(){
      return {color:'#ffffff'}
    },
    handleWheel:function(){
      console.log(' in handleWheel');
      var newColor = this.getRandomColor();
      this.setState({color:newColor});
    },
    getRandomColor:function(){
      var r = Math.floor(Math.random()*256);
      var g = Math.floor(Math.random()*256);
      var b = Math.floor(Math.random()*256);

      var R = r.toString(16);
      var G = g.toString(16);
      var B = b.toString(16);

      return "#"+R+G+B;
    },
    render:function(){
      return <div onWheel={this.handleWheel}
         style={{backgroundColor:this.state.color}}>
          Hello Event & State
      </div>
    }
  })

  ReactDOM.render(
  <EventComponent/>,
  document.getElementById('example')
  )

</script>

</body>
</html>

React onWheel的更多相关文章

  1. React.js深入学习详细解析

    今天,继续深入学习react.js. 目录: 一.JSX介绍 二.React组件生命周期详解 三.属性.状态的含义和用法 四.React中事件的用法 五.组件的协同使用 六.React中的双向绑定   ...

  2. React JS 基础知识17条

    1. 基础实例 <!DOCTYPE html> <html> <head> <script src="../build/react.js" ...

  3. 【转】Facebook React 和 Web Components（Polymer）对比优势和劣势

    原文转自:http://segmentfault.com/blog/nightire/1190000000753400 译者前言 这是一篇来自 StackOverflow 的问答,提问的人认为 Rea ...

  4. React事件属性

    一.简介 二.滚动例子,滚动改变颜色 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta c ...

  5. React系列（一）：React入门

    React简介 1.由来 React是有Facebook开发出来用于构建前端界面的JS组件库,由于其背后的强大背景,使得这款库在技术开发上完全没有问题. 2.React的优势 解决大规模项目开发中数据 ...

  6. react.js 从零开始（五）React 中事件的用法

    事件系统   虚拟事件对象 事件处理器将会传入虚拟事件对象的实例,一个对浏览器本地事件的跨浏览器封装.它有和浏览器本地事件相同的属性和方法,包括 stopPropagation() 和 prevent ...

  7. 高性能迷你React框架anu在低版本IE的实践

    理想是丰满的,现实是骨感的,react早期的版本虽然号称支持IE8,但是页面总会不自觉切换到奇异模式下,导致报错.因此必须让react连IE6,7都支持,这才是最安全.但React本身并不支持IE6, ...

  8. React 实现一个漂亮的 Table

    概述 对于企业级后台产品来说,Table 应该是使用最频繁的组件了,它通常比 Form 和 Chart 的使用还频繁.对于这么一个常用的组件,我们决定要把它从 RSuite 中单独出来开发,并且要具有 ...

  9. Facebook React 和 Web Components（Polymer）对比优势和劣势

    目录结构 译者前言 Native vs. Compiled 原生语言对决预编译语言 Internal vs. External DSLs 内部与外部 DSLs 的对决 Types of DSLs - ...

随机推荐

  1. （二 -1） 天猫精灵接入Home Assistant-控制Mqtt设备

    关于hass对接mqtt 请参考官网 https://www.hachina.io/docs/7083.html 1 登陆运行着hass的阿里云服务器 2 修改hass配置文件,添加mqtt服务信息 ...

  2. DIYer最担心的事来了！CPU降价彻底无望

    12月27日,IDC发布2019年中国PC市场十大预测.IDC指出,2018年全年中国PC市场预计最终销售为5200万台左右,下滑了3.4%.2019年中国PC市场会处于一种习惯性艰难期,但是市场也不 ...

  3. 用kubernetes部署oa 强制删除pod delete

    1.[root@pserver88 oa]# cat Dockerfile FROM tomcat RUN rm -rf /usr/local/tomcat/webapps/*ADD ROOT.war ...

  4. Redis缓存的使用

    首先需要去Redis官网下载Redis的安装包 要在eclipse中使用Redis还需要两个jar包,需要的自行查找或者联系我 运行Redis需要开启Redis的服务端,也就是下载的安装包中的“red ...

  5. CF662C Binary Table FWT

    传送门 \(N \leq 20\)很小诶 一个暴力的思路是枚举行的翻转状态然后在列上贪心 复杂度为\(O(2^NM)\)显然过不去 考虑到可能有若干列的初始状态是一样的,那么在任意反转之后他们贪心的策 ...

  6. linux配置iptables(3)

    简单通用 web 服务器iptables 配置 *filter :INPUT DROP [0:0]:FORWARD DROP [0:0]:OUTPUT ACCEPT [0:0] #超出 链规则 的数据 ...

  7. npm install xxx --save-dev 与npm install xxx --save 的区别

    正常情况下: 当你为你的模块安装一个依赖模块时 1.你得先安装他们(在模块根目录下npm install module-name) 2.连同版本号手动将他们添加到模块配置文件package.json中 ...

  8. RabbitMQ在特来电的深度应用

    特来电是一个互联网公司,而且是技术领先的互联网公司.互联网公司的标配是什么?答案就是缓存+MQ.没错,您没看错,就是MQ--消息队列,我们今天要讨论的RabbitMQ就是消息队列中功能非常强大的一种. ...

  9. swift 各种学习

    swift使用cocoapods引用oc第三方库 1. 创建桥接文件 2. 在主工程的 build Settings 搜索 bridge   设置 Objective-C Bridging Headi ...

  10. Visual Studio 2013编辑器+SourceTree代码管理工具及扩展工具

    Visual Studio 2013: 美国微软公司的编辑开发工具 扩展工具: Resharper:进行深度代码分析,函数深度查询(ctrl+鼠标左): Grunt:是基于Node.js的项目以自动化 ...