一、事件处理函数的使用
鼠标事件:
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>