一、简介

二、滚动例子，滚动改变颜色

  1.  <!DOCTYPE html>
  2.  <html lang="zh-cn">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>React涓殑浜嬩欢</title>
  6.  </head>
  7.  <body>
  8.      <script src="./react-0.13.2/react-0.13.2/build/react.js"></script>
  9.      <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
  10.      <script type="text/jsx">
  11.          var HelloWorld = React.createClass({
  12.              getInitialState: function () {
  13.                  return {
  14.                      backgroundColor: '#FFFFFF'
  15.                  }
  16.              },
  17.              handleWheel: function (event) {
  18.                  var newColor = (parseInt(this.state.backgroundColor.substr(1), 16) + event.deltaY * 997).toString(16);
  19.                  newColor = '#' + newColor.substr(newColor.length - 6).toUpperCase();
  20.                  this.setState({
  21.                      backgroundColor: newColor
  22.                  })
  23.              },
  24.              render: function () {
  25.                  console.log(this.state)
  26.                  return <div onWheel={this.handleWheel} style={this.state}>
  27.                  <p>Hello, World</p>
  28.                  </div>;
  29.              },
  30.          });
  31.          React.render(<HelloWorld></HelloWorld>, document.body);
  32.      </script>
  33.  </body>
  34.  </html>

三、鼠标事件，输对密码才显示内容

  1.  <!DOCTYPE html>
  2.  <html lang="zh-cn">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>React涓殑浜嬩欢</title>
  6.  </head>
  7.  <body>
  8.      <script src="./react-0.13.2/react-0.13.2/build/react.js"></script>
  9.      <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
  10.      <script type="text/jsx">
  11.          var HelloWorld = React.createClass({
  12.              getInitialState: function () {
  13.                  return {
  14.                      password: ''
  15.                  }
  16.              },
  17.              handleKeyPress: function (event) {
  18.                  this.setState({
  19.                      password: this.state.password + event.which
  20.                  });
  21.                  console.log(this.state)
  22.              },
  23.              handleChange: function (event) {
  24.                  event.target.value = '';
  25.              },
  26.              render: function () {
  27.                  return <div>
  28.                  <input onKeyPress={this.handleKeyPress} onChange={this.handleChange}></input>
  29.                  <p style={{
  30.                      'display': this.state.password.indexOf('495051') >= 0 ? 'inline' : 'none'
  31.                      }}>You got it!</p>
  32.                  </div>;
  33.              },
  34.          });
  35.          React.render(<HelloWorld></HelloWorld>, document.body);
  36.      </script>
  37.  </body>
  38.  </html>

四、鼠标事件2，记录鼠标的位置

  1.  <!DOCTYPE html>
  2.  <html lang="zh-cn">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>React涓殑浜嬩欢</title>
  6.  </head>
  7.  <body>
  8.      <script src="./react-0.13.2/react-0.13.2/build/react.js"></script>
  9.      <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
  10.      <script type="text/jsx">
  11.          var HelloWorld = React.createClass({
  12.              getInitialState: function () {
  13.                  return {
  14.                      x: 0,
  15.                      y: 0
  16.                  }
  17.              },
  18.              handleMouseMove: function (event) {
  19.                  this.setState({
  20.                      x: event.clientX,
  21.                      y: event.clientY
  22.                  });
  23.              },
  24.              render: function () {
  25.                  return <div onMouseMove={this.handleMouseMove} style={{
  26.                      height: '1000px',
  27.                      width: '700px',
  28.                      backgroundColor: 'gray'
  29.                  }}>
  30.                  {this.state.x + ', ' + this.state.y}
  31.                  </div>;
  32.              },
  33.          });
  34.          React.render(<HelloWorld></HelloWorld>, document.body);
  35.      </script>
  36.  </body>
  37.  </html>

React事件属性的更多相关文章

  1. React事件杂记及源码分析

    前提 最近通过阅读React官方文档的事件模块,发现了其主要提到了以下三个点  调用方法时需要手动绑定this  React事件是一种合成事件SyntheticEvent,什么是合成事件?  事件属性 ...

  2. react事件机制

    1. react的事件是合成事件((Synethic event),不是原生事件 <button onClick={this.handleClick}></button> &l ...

  3. React 事件总结

    目录 一 绑定事件处理函数 1.1 鼠标类 1.2 拖拽事件: 1.3 触摸 1.4 键盘 1.5 剪切类 1.6 表单类 1.7 焦点事件 1.8 UI元素类 1.9 滚动 1.10 组成事件 1. ...

  4. 【React】354- 一文吃透 React 事件机制原理

    大纲 主要分为4大块儿,主要是结合源码对 react事件机制的原理 进行分析,希望可以让你对 react事件机制有更清晰的认识和理解. 当然肯定会存在一些表述不清或者理解不够标准的地方,还请各位大神. ...

  5. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  6. 源码看React 事件机制

    对React熟悉的同学都知道,React中的事件机制并不是原生的那一套,事件没有绑定在原生DOM上,发出的事件也是对原生事件的包装.那么这一切是怎么实现的呢? 事件注册 首先还是看我们熟悉的代码 &l ...

  7. React事件绑定的几种方式对比

    React事件绑定 由于类的方法默认不会绑定this,因此在调用的时候如果忘记绑定,this的值将会是undefined.通常如果不是直接调用,应该为方法绑定this.绑定方式有以下几种: 1. 在构 ...

  8. React组件属性部类（propTypes）校验

    React组件属性类型(propTypes)校验 Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (v ...

  9. JS中的事件类型和事件属性的基础知识

    周末无聊, 这几天又复习了下JS搞基程序设计3, 想着好记性不如浪笔头哇, 要么把这些东西写下来, 这样基础才能更加扎实么么哒, 知道的同学也可以直接过一下,当做复习,  小姨子再也不用担心我的学习啦 ...

随机推荐

  1. 【转载】如何在FPGA设计环境中添加加时序约束

    转自:http://bbs.ednchina.com/BLOG_ARTICLE_198929.HTM 如何在FPGA设计环境中加时序约束    在给FPGA做逻辑综合和布局布线时,需要在工具中设定时序 ...

  2. 使用git客户端获取shiro

    1.进入下载的目标文件夹右键( Git Bash Here )

  3. 基于.net mvc的校友录（五、web.config对的配置以及filter实现的权限控制）

    web.config配置文件 此文件是整个系统的配置中心,它告诉iis服务器本网站需要哪些运行时环境,需要哪些环境,将要进行哪些操作,开发人员也会将一个常量性的数据放在此配置中,以备系统全局调用.此文 ...

  4. 小组开发项目NABC分析

    我们团队的开发项目为:重量解锁 是根据重力感应实现手机的解锁方式,在传统滑屏的基础上我们想增添新的形式,实现用户用一组动作就能实现手机解锁功能,更加方便,炫酷. NABC模型 1.N:我们的创意在使用 ...

  5. 第三次作业，github的基本操作

    chengjiangtao@pc MINGW32 ~$ git config --global user.name "chengjiangtao" chengjiangtao@pc ...

  6. windows phone和android,ios的touch事件兼容

    1.开发背景 最近用html5写了个小游戏,中间踩过无数坑,有很多甚至百度都百度不到答案,可见html5还真是不成熟,兼容性的复杂度比ie6有过之而无不及,性能那个渣简直无力吐槽.. 好了,吐槽结束, ...

  7. ffmpeg 命令

    1.保存文件: ffmpeg -i rtsp://admin:12345@172.29.61.108/Streaming/Channels/1 -vcodec copy -acodec libvo_a ...

  8. Drools规则加载变量冲突问题分析

    问题现象说明 在个别环境下加载规则时出现:rule/trade/hg/Rule_FY_*.java (53:3948) : Duplicate local variable paraMap,出现此问题 ...

  9. java list中的对象，按对象某属性排序

    1:对象类 需要 实现: public class TreeNode extends BaseBean implements Comparable <TreeNode> { private ...

  10. 《IT小小鸟》阅读心得

    我是一个不爱看书的人,认为看那些又臭又长废话连篇的书是在浪费时间,但我不认为在那么多的书中没有好书,在一次的职业生涯规划中老师推荐了这本书,一开始认为不值得一看,但还是拿了起来,读了有不少的感触. 书 ...