react中的事件
来源:互联网 发布:js post 跨域解决方案 编辑:程序博客网 时间:2024/06/11 11:11
一、事件处理函数的使用
鼠标事件:
onClick
onContextMenu
onDoubleClick
onMouseDown
onMouseEnter
onMouseLeave
onMouseMove
onMouseOut
onMouseOver
onMouseUp
onDrop
onDrag
onDragEnd
onDragEnter
onDragExit
onDragLeave
onDragOver
onDragStart
触摸事件:
onTouchCancel
onTouchEnd
onTouchMove
onTouchStart
键盘事件:
onKeyDown
onKeyPress
onKeyUp
剪切事件:
onCopy
onCut
onPaste
表单事件:
onChange
onInput
onSubmit
焦点事件:
onFocus
onBlur
UI事件:
onScroll
滚动事件:
onWheel
二、事件对象介绍
实例代码:
<!DOCTYPE html><html lang="zn-cn"><head> <meta charset="UTF-8"> <title>React</title></head><body><script src="./build/react.js"></script><script src="./build/JSXTransformer.js"></script><script type="text/jsx"> var HelloWorld = React.createClass({ getInitialState:function () { return { backgroundColor:'#FFFFFF' } }, handleWheel:function () { 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/>,document.body);</script></body></html>
<!DOCTYPE html><html lang="zn-cn"><head> <meta charset="UTF-8"> <title>React</title></head><body><script src="./build/react.js"></script><script src="./build/JSXTransformer.js"></script><script type="text/jsx"> var HelloWorld = React.createClass({ getInitialState:function () { return { password:'' } }, handleKeyPress:function () { this.setState({ password:this.state.password + event.which }); console.log(this.state); }, handleChange:function () { event.target.value = ''; }, render:function () { console.log(this.state); return <div> <input onKeyPress={this.handleKeyPress} onChange={this.handleChange} /> <p style={{ 'display':this.state.password.indexOf('495051') >= 0?'inline':'none' }}>You get it!</p> </div>; } }); React.render(<HelloWorld/>,document.body);</script></body></html>
三、事件和状态关联
实例如下:
<!DOCTYPE html><html lang="zn-cn"><head> <meta charset="UTF-8"> <title>React</title></head><body><script src="./build/react.js"></script><script src="./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/>,document.body);</script></body></html>
阅读全文
0 0
- React Native中的事件
- react中的事件
- react中的事件
- 关于react绑定事件中的this
- React事件
- react事件
- react 事件系统
- React-事件处理详解
- React-事件处理详解
- React事件代理
- React动态添加事件
- 窥探react事件
- react 事件 (笔记)
- React-native事件处理
- React -- 事件系统
- react 之 事件处理
- react阻止冒泡事件
- React 事件 监听
- 分布式与集群的区别
- Lab 1:MapReuce
- 零基础认识BeautifulSoup简单爬虫
- 【Scikit-Learn 中文文档】20 流形学习
- PAT
- react中的事件
- python双版本共存
- 不只是阿里的操作系统,AliOS正式开源!
- Fragment简单介绍
- LeetCode Regular Expression Matching
- C++学习之路(25)---vs2015动态链接库.dll的生成方法
- MySQL的server_uuid获取之uuid()函数和uuid_short()函数
- Retrofit总结
- 河南高性能计算研发力量调查