一、事件处理函数的使用
鼠标事件:
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 @H_301_333@HelloWorld = @H_301_333@React.@H_301_333@createClass({ getInitialState:function () { return { @H_301_333@backgroundColor:'#FFFFFF' } },handleWheel:function () { var newColor = (parseInt(this.@H_301_333@state.@H_301_333@backgroundColor.substr(1),16) + @H_301_333@event.deltaY * 997).toString(16); newColor = '#' + newColor.substr(newColor.@H_301_333@length - 6).toUpperCase(); this.setState({ @H_301_333@backgroundColor:newColor }); },render:function () { @H_301_333@console.log(this.@H_301_333@state); return <div onWheel={this.handleWheel} style={this.@H_301_333@state}> <p>Hello,World</p> </div>; } }); @H_301_333@React.@H_301_333@render(<HelloWorld/>,@H_301_333@document.@H_301_333@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 @H_301_333@HelloWorld = @H_301_333@React.@H_301_333@createClass({ getInitialState:function () { return { @H_301_333@password:'' } },handleKeyPress:function () { this.setState({ @H_301_333@password:this.@H_301_333@state.@H_301_333@password + @H_301_333@event.@H_301_333@which @H_301_333@ }); @H_301_333@console.log(this.@H_301_333@state); },handleChange:function () { @H_301_333@event.@H_301_333@target.@H_301_333@value = ''; },render:function () { @H_301_333@console.log(this.@H_301_333@state); return <div> <input onKeyPress={this.handleKeyPress} onChange={this.handleChange} /> <p style={{ 'display':this.@H_301_333@state.@H_301_333@password.indexOf('495051') >= 0?'inline':'none' }}>You get it!</p> </div>; } }); @H_301_333@React.@H_301_333@render(<HelloWorld/>,@H_301_333@document.@H_301_333@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 @H_301_333@HelloWorld = @H_301_333@React.@H_301_333@createClass({ getInitialState:function () { return { @H_301_333@x:0,@H_301_333@y:0 } },handleMouseMove:function (event) { this.setState({ @H_301_333@x:event.@H_301_333@clientX,@H_301_333@y:event.@H_301_333@clientY @H_301_333@ }); },render:function () { return <div onMouseMove={this.handleMouseMove} style={{ @H_301_333@height:'1000px',@H_301_333@width:'700px',@H_301_333@backgroundColor:'gray' }}>{this.@H_301_333@state.@H_301_333@x + ',' + this.@H_301_333@state.@H_301_333@y} </div>; } }); @H_301_333@React.@H_301_333@render(<HelloWorld/>,@H_301_333@document.@H_301_333@body); </script> </body> </html>