一、简介

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

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>React涓殑浜嬩欢</title>

 </head>

 <body>

     <script src="./react-0.13.2/react-0.13.2/build/react.js"></script>

     <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>

     <script type="text/jsx">

         var HelloWorld = React.createClass({

             getInitialState: function () {

                 return {

                     backgroundColor: '#FFFFFF'

                 }

             },

             handleWheel: function (event) {

                 var newColor = (parseInt(this.state.backgroundColor.substr(1), 16) + event.deltaY * 997).toString(16);

                 newColor = '#' + newColor.substr(newColor.length - 6).toUpperCase();

                 this.setState({

                     backgroundColor: newColor

                 })

             },

             render: function () {

                 console.log(this.state)

                 return <div onWheel={this.handleWheel} style={this.state}>

                 <p>Hello, World</p>

                 </div>;

             },

         });

         React.render(<HelloWorld></HelloWorld>, document.body);

     </script>

 </body>

 </html>

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

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>React涓殑浜嬩欢</title>

 </head>

 <body>

     <script src="./react-0.13.2/react-0.13.2/build/react.js"></script>

     <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>

     <script type="text/jsx">

         var HelloWorld = React.createClass({

             getInitialState: function () {

                 return {

                     password: ''

                 }

             },

             handleKeyPress: function (event) {

                 this.setState({

                     password: this.state.password + event.which

                 });

                 console.log(this.state)

             },

             handleChange: function (event) {

                 event.target.value = '';

             },

             render: function () {

                 return <div>

                 <input onKeyPress={this.handleKeyPress} onChange={this.handleChange}></input>

                 <p style={{

                     'display': this.state.password.indexOf('495051') >= 0 ? 'inline' : 'none'

                     }}>You got it!</p>

                 </div>;

             },

         });

         React.render(<HelloWorld></HelloWorld>, document.body);

     </script>

 </body>

 </html>

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

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>React涓殑浜嬩欢</title>

 </head>

 <body>

     <script src="./react-0.13.2/react-0.13.2/build/react.js"></script>

     <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>

     <script type="text/jsx">

         var HelloWorld = React.createClass({

             getInitialState: function () {

                 return {

                     x: 0,

                     y: 0

                 }

             },

             handleMouseMove: function (event) {

                 this.setState({

                     x: event.clientX,

                     y: event.clientY

                 });

             },

             render: function () {

                 return <div onMouseMove={this.handleMouseMove} style={{

                     height: '1000px',

                     width: '700px',

                     backgroundColor: 'gray'

                 }}>

                 {this.state.x + ', ' + this.state.y}

                 </div>;

             },

         });

         React.render(<HelloWorld></HelloWorld>, document.body);

     </script>

 </body>

 </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. python实现树莓派生成并识别二维码

    python实现树莓派生成并识别二维码 参考来源:http://blog.csdn.net/Burgess_Liu/article/details/40397803 设备及环境 树莓派2代 官方系统R ...

  2. html readme

    取html页面高度 document.documentElement.scrollHeight在IE和Chrome下,可以正常取到合适的全文高度,但是firefox下取到的则过高: 用document ...

  3. PHP URL 重定向 的三种方法（转载)

    为了方便查询,转载一篇. 1.使用header()函数    PHP的HTTP相关函数种提供了一个 header()函数,首先要清楚,header()函数必须放在php程序的开头部分,而且之前不能有另 ...

  4. Windows8 各种版本区别对比详解

    微软的 Windows8 操作系统提供了4个不同的版本,分别是 Windows RT.Windows 8 标准版.Windows 8 Pro 专业版 以及 Windows 8 Enterprise 企 ...

  5. 远航1617团队alpha版本分数分配与人员调动

    一.根据项目开始初期的分数分配要求及项目发布后大家的讨论,我们对组内成员的分数分配如下: 刘昊岩 20.5 周  萱 20.0 林谋武 19.0 杨  帆 18.5 高小洲 21.0 谢勤政 21.5 ...

  6. java并发编程：如何创建线程

    原文:http://www.cnblogs.com/dolphin0520/p/3913517.html 一.Java中关于应用程序和进程相关的概念 在Java中,一个应用程序对应着一个JVM实例(也 ...

  7. Bootstrap入门三：页面排版

    在Bootstrap中,页面的排版都是从全局的概念上出发,定制了主体文本.强调文本.标题.Code风格.按钮.表单.表格等格式,并运用CSS3的@font-face和伪元素一起实现了一套icon主题. ...

  8. .NET-提取字符串实践总结

    前阶段工作时遇到一个截取字符串的问题,由于字符串比较长,大概得几万字符吧(XML形式),要提取中间两个节点之间的内容,在网上费了好大功夫才找到能用的正则.工作当用的时候碰到这样的事最蛋疼了,网上的资源 ...

  9. 23、获取app所占据的内存

    public static void getRunningAppProcessInfo(ActivityManager mActivityManager) { //ActivityManager mA ...

  10. 关于VS2010中一打字，换行，拖控件便出现卡死的问题的解决方案

    大家好,这是我第一篇博文. 最近一个月都是静静的观看,想发帖子很久了. 最近实习完刚换了份工作,入职之后啊先是装了一堆软件.然后,便出现问题,就是VS2010上码字和切换页面的时候会卡.开始的时候每次 ...