<!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. ucml 子业务组件与行为参与者业务组件

  2. Oracle数据库查询优化（上百万级记录如何提高查询速度）

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引.2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索引 ...

  3. ubuntu16.04安装配置nagios

    参考博文:https://www.howtoing.com/ubuntu-nagios/ 该博文真实有效可供参考,按照步骤,基本可以成功 一.安装的先决条件 sudo apt-get install ...

  4. Google的Flutter工具允许开发者开发跨平台应用

    与大多数应用程序开发人员交谈,他们会告诉你,与iOS相比,制作Android应用程序要困难得多,也更复杂,也不那么有趣.实际上,如果你要求报价,这两种软件都将单独定价,因为它们都需要单独的开发时间和团 ...

  5. android 3.0+百度地图api地图如何移动到指定的经纬度处

    由于百度地图api,2.0+和3.0+的改动比较大,api基本上被全换过了,有些同学可能2.0+的api使用的非常熟悉,但是更新到3.0+时,却会遇到一些小麻烦(由于api变了,你就需要重新学习它的a ...

  6. Zephyr的Shell

    1 前言 通过Shell可以跟子系统打交道,子系统也可以提供很多接口供外部设置和读取信息. 下面就Shell的Kconfig配置.Shell的使用以及如何新建一个Shell命令展开. 可以说Shell ...

  7. SVM的简单介绍

    ng的MI-003中12 ——SVM 一.svm目标函数的由来 视频先将LR的损失函数: 在上图中,先将y等于0 和y等于1的情况集合到一起成为一个损失函数,然后分别讨论当y等于1的时候损失函数的结果 ...

  8. Vue与Element走过的坑。。。。带上Axios

    1.Axios中post传参数组(java后端接收数组) 虽然源数据本身就是数组,但是传参时会自动变成key:数值或者服务器无法接收的对象,如下 如果不仔细看,很容易认为这两种情况没毛病..(后端不背 ...

  9. [转]zookeeper-端口说明

    一.zookeeper有三个端口(可以修改) 1.2181 2.3888 3.2888 二.3个端口的作用 1.2181:对cline端提供服务 2.3888:选举leader使用 3.2888:集群 ...

  10. python打印列表的下标和值的例子：

    python打印列表的下标和值的例子: In [1]: list01=[1,4,5] In [10]: def funct01(ll):   ....:     for index,value in ...