一、事件处理函数的使用
鼠标事件：
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>
---------------------
作者：u013063153
来源：CSDN
原文：https://blog.csdn.net/u013063153/article/details/52497271
版权声明：本文为博主原创文章，转载请附上博文链接！
网友评论