React事件属性
一、简介
二、滚动例子，滚动改变颜色
<!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事件属性的更多相关文章
- React事件杂记及源码分析
前提 最近通过阅读React官方文档的事件模块,发现了其主要提到了以下三个点 调用方法时需要手动绑定this React事件是一种合成事件SyntheticEvent,什么是合成事件? 事件属性 ...
- react事件机制
1. react的事件是合成事件((Synethic event),不是原生事件 <button onClick={this.handleClick}></button> &l ...
- React 事件总结
目录 一 绑定事件处理函数 1.1 鼠标类 1.2 拖拽事件: 1.3 触摸 1.4 键盘 1.5 剪切类 1.6 表单类 1.7 焦点事件 1.8 UI元素类 1.9 滚动 1.10 组成事件 1. ...
- 【React】354- 一文吃透 React 事件机制原理
大纲 主要分为4大块儿,主要是结合源码对 react事件机制的原理 进行分析,希望可以让你对 react事件机制有更清晰的认识和理解. 当然肯定会存在一些表述不清或者理解不够标准的地方,还请各位大神. ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- 源码看React 事件机制
对React熟悉的同学都知道,React中的事件机制并不是原生的那一套,事件没有绑定在原生DOM上,发出的事件也是对原生事件的包装.那么这一切是怎么实现的呢? 事件注册 首先还是看我们熟悉的代码 &l ...
- React事件绑定的几种方式对比
React事件绑定 由于类的方法默认不会绑定this,因此在调用的时候如果忘记绑定,this的值将会是undefined.通常如果不是直接调用,应该为方法绑定this.绑定方式有以下几种: 1. 在构 ...
- React组件属性部类（propTypes）校验
React组件属性类型(propTypes)校验 Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (v ...
- JS中的事件类型和事件属性的基础知识
周末无聊, 这几天又复习了下JS搞基程序设计3, 想着好记性不如浪笔头哇, 要么把这些东西写下来, 这样基础才能更加扎实么么哒, 知道的同学也可以直接过一下,当做复习, 小姨子再也不用担心我的学习啦 ...
随机推荐
- java笔试题(2)
简述构造器的运行机制 首先要注意的是的构造器并不是函数,所以他并不能被继承,这在我们extends的时候写子类的构造器时比较的常见,即使子类构造器参数和父类的完全一样,我们也要写super就是因为这个 ...
- “我爱淘”第二冲刺阶段Scrum站立会议2
完成任务: 对发布页面优化了一下,并将登陆的功能实现了一点,就是还没有实现注册的功能 . 计划任务: 在客户端实现分类功能,通过学院的分类查看书籍. 遇到问题: 自动将数据库的内容返回到客户端.
- 《实时控制软件设计》Git 基本操作练习
根据老师提供的教程 对 数据库创建.提交文件.创建分支.删除分支.合并分支.冲突处理等操作进行了练习 得到log文件如下: yanbin-guo@yanbinguo MINGW64 /Git (mas ...
- REST API 基于ACCESS TOKEN 的权限解决方案
REST 设计原则是statelessness的,而且但客户端是APP时,从APP发起的请求,不是基于bowers,无法带相同的sessionid,所以比较好的方案是每次请求都带一个accesstok ...
- Brush Mode --- Nyoj 737 分类： Brush Mode 2014-03-25 08:10 202人阅读 评论(0) 收藏
石子合并(一) 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 有N堆石子排成一排,每堆石子有一定的数量.现要将N堆石子并成为一堆.合并的过程只能每次将相邻的两堆 ...
- while小问题
while(!m_SMque.pop(data)); 看到这个有点忘了,如果pop返回false会一直执行pop,其实这个执行的是空语句,而while每次执行都需要判断条件,所以如果pop返回fals ...
- JS的基础语法
8.运算符号表达式 ①数学运算符 数学运算符有+.-.*./除().%(余数) var a = 10; var b = 5; alert(a+b); 预览以后在网页上弹出的对话框数值就是15. ②逻辑 ...
- ios中webservice报文的拼接
1.报文头需要密码验证的 - (void)sendAsynWebServiceRequest:(NSString *)nameSpace method:(NSString *)method reque ...
- geotools解析SLD中的elsefilter为什么里面的filter无效
原因是在org.geotools.renderer.lite.StreamingRenderer中的process函数: /** * @param rf * @param feature * @par ...
- PE文件结构
PE头 typedef struct _IMAGE_NT_HEADERS { DWORD Signature; PE头标识 为固定的ascii码 PE\\ IMAGE_FILE_HEADER File ...