<!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. esp8266(1) 手机+Arduino+esp8266通信

    ESP8266 Android与Arduino通信 功能描述: 1 Arduino上电,它通过软串口(Arduino的 2号和3号脚)发送命令,配置espson8266为 AP模式,wifi名 DDD ...

  2. Linux下 XordDos(BillGates)木马查杀记录

    最近朋友的一台服务器突然网络异常,cpu占用率暴表,登录上去一查,cpu占用300% 左右,流量异常,经过看查进程,获取信息最终确认为中了dos木马,经过几天的研究,基本上已经清除,以下是清理记录. ...

  3. mybatis逆向工程之maven工程

    maven工程与动态web工程存在差异,不过大体是相同的 注意:运行成功后记得refresh刷新下,否则看不到 一.在pom文件中进行如下配置 <project xmlns="http ...

  4. 在Qt项目中如何添加一个已有的项目作为子项目

    新建一个子目录项目(具体方法参见<类似Visual Studio一样,使用Qt Creator管理多个项目,创建子项目>),然后需要添加的项目移动到该子目录项目目录下,再在其pro文件中添 ...

  5. OpenGL ES SL 3.0规范中以前的attribute改成了in varying改成了out

           OpenGL ES和OpenGL的图标 关于“OpenGL ES SL 3.0规范中以前的attribute改成了in varying改成了out”这个问题,做一阐述: 1.关键字的小修 ...

  6. QT中PRO文件写法的详细介绍

    学习Qt时,发现有些知识看了不经常用就忘了,以下是书本上写的一些关于qmake的相关知识,自己看后,打算把一些经常用到的记下来,整理整理. Qt程序一般使用Qt提供的qmake工具来编译. qmake ...

  7. ARM汇编语言基础

    ARM 与 Thumb 寄存器对应关系 PC寄存器: ARM状态为R15,Thumb状态为PC LR寄存器: ARM状态为R14,Thumb状态为LR SP寄存器: ARM状态为R13,Thumb状态 ...

  8. PAT A1128 N Queens Puzzle （20 分）——数学题

    The "eight queens puzzle" is the problem of placing eight chess queens on an 8×8 chessboar ...

  9. jconsole使用

    先看一张图 根据JConsole和任务管理器对比,堆内存大小在250M左右,差不多空跑一个程序用idea启动springboot就是这个大小 项目启动初始类在一万个左右,活动线程50个上下,cpu利用 ...

  10. esp-adf Element PipeLine

    audio_element: 开发基于ADF的程序软件最基本的模块就是audio_element对象.所有的编码.解码.过滤.输入流.输出流实际上都是audio_element.(这个是官方的文件我翻 ...