React.js学习笔记之事件系统
React.js学习笔记之事件系统@(React学习) 事件系统
组件createClass后创建的是许多方法组成的对象。组件中使用的方法分为React自有的方法与用户定义的方法。其中React自有方法是组件生命周期中的方法，如：
绑定事件处理函数鼠标类
拖拽事件：
触摸
触摸只会在移动设备上产生 键盘
剪切类
对应的是我们常常使用的复制、剪切和粘贴 表单类(会专门总结表单类事件，在此仅仅简单列出)
焦点事件
UI元素类
滚动事件触发的时候会触发onScroll事件 滚动
鼠标滚轮触发的事件，监听滚动幅度，滚动方位 组成事件
图片类
多媒体类
实例演示var HelloDada = React.creatClass({
getInitialState:function(){
return{
name:''
};
},handleChange:function(e){
this.setState({
name:e.target.value
});
},render:function(){
return <div>
<input onChange={this.handleChange} />
</div>
}
});
ReactDom.render(<HelloDada/>,document.body);
事件池虚拟事件对象已经被合并。这意味着虚拟事件对象将被重新使用，而该事件回调被调用之后所有的属性将无效。这是出于性能的考虑。因此，您不能以异步的方式访问事件。 function onClick(event) {
console.log(event); // =>无效的对象
console.log(event.type); // => "click"
var eventType = event.type; // => "click"
setTimeout(function() {
console.log(event.type); // => null
console.log(eventType); // => "click"
},0);
this.setState({clickEvent: event}); // 不起作用.this.state.clickEvent 将只包含空值.
this.setState({eventType: event.type}); // 您依然可以导出事件属性
}
事件对象事件处理器将会传入
handleChange:function(e){
console.log(e.target.value);
}
其中 (以下内容括号内为类型) 通用属性
不同事件对象的特有属性剪切事件
键盘事件
焦点事件
鼠标事件
触摸事件
UI元素事件
鼠标滚动
实例
var HelloDada = React.creatClass({
getInitialState:function(){
return {
backgroundColor:'#FFFFFF'
}
},handleWheel:function(e){
var newColor = (parseInt(this.state.backgroundColor.substr(1),16)+e.deltaY*997).tiString(16);
this.setState({
backgroundColor:newColor
})
},render:function(){
return <div onWheel={this.handleWheel} style={this.state}>
<p>Dada Shuaige</p>
</div>
}
});
ReactDOM.render(<HelloDada />,document.body)
2.键盘事件对象 var Dada =React.creatClass{
getInitialState:function(){
return{
password:''
}
},handleKeyPress:function(e){
this.setState({
paddword:this.state.password+e.which
});
},handleChange:function(e){
e.target.value='';
},render:function(){
return <div>
<input onKeyPress={this.handleKeyPress} onChange={this.handleChange} />
<p style={{
'display':this.state.password.indexOf('495051') >=0?'block':'none'
}}>Dada handsomeboy</p>
</div>
}
};
ReactDOM.render(<Dada />,document.body)
事件与状态关联状态不仅仅实现了组件内部结果的清晰对应，还实现了组件与用户之间的交互，使用户与组件的行为紧紧结合起来 handleChange:function(e){
this.setState({Dada:e.target.value});
}
实例var Dada =React.creatClass({
getInitialState:function(){
return{
x:0,y:0
}
},handleMouseMove:function(e){
this.setState({
x:e.clientX,y:e.clientY
});
},render:function(){
return <div onMouseMove={this.handleMouseMove} style={{
width:'200px',height:'200px',backgroundColor:'#999'
}}>
{this.state.x+'.'+this.state.y}
</div>
}
});
ReactDOM.render(<Dada />,document.body)
小结本节主要介绍了React的事件系统，很详细的列出了每一个事件对象与事件对象的属性，可以作为一个查找的参考。 特别感谢
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |