盒子
盒子
文章目录󰁋
  1. 一、编写事件处理函数
  2. 二、绑定事件处理函数
  3. 三、事件对象
  4. 四、事件与状态关联

React之事件(四)

一、编写事件处理函数

image.png

  • 在函数体中进行一些操作,常见的有:更新页面内容,更新组件状态,与后台交互

image.png

书写方式

1
2
3
4
5
6
var Demo = React.createClass({
getInitialState:function(){ },
handleClick: function(event){ },
handleChange: function(){ },
render:function(){ },
})
  • 上面的代码中有的有参数event,有的没有,这个根据自己的需求

二、绑定事件处理函数

  • onClick={this,handleClick}
  • 需要注意的是:不要在事件后面添加上一个()

其他的事件

  • 触摸事件:onTouchCancelonTouchEndonTouchMoveonTouchStart
  • 键盘事件:onKeyDownonKeyUponKeyPress(前两者的组合)
  • 表单时间:onChangeonInputonSubmit
  • 焦点事件:onFocusonBlur
  • UI元素事件:onScroll
  • 滚动事件:onWhell(鼠标滚动)
  • 鼠标事件:onClickonContextMenuonDoubleClick……
1
2
3
4
5
6
7
8
9
10
11
var Demo = React.createClass({
handleClick:function(e){
console.log(e)
console.log(e.target)
console.log(e.nativeEvent)
},
render:function(){
return <div onClick={this.handleClick}>Hello World</div>
}
})
ReactDOM.render(<Demo/>,document.getElementById('app'))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var Demo = React.createClass({
getInitialState:function(){
return {
width: 200,
height: 200,
backgroundColor: '#DDDDDD'
}
},
/*handleWheel:function(e){
var newColor = (parseInt(this.state.backgroundColor.substr(1),16) + e.deltaY).toString(16)
newColor = '#' + newColor.toUpperCase()
console.log(newColor)
this.setState({
backgroundColor:newColor
})
},*/
randomColor:function(){
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
return 'rgb('+r+','+g+','+b+')'
},
handleWheel:function(){
this.setState({
backgroundColor:this.randomColor()
})
},
render:function(){
return <div onWheel={this.handleWheel} style={this.state}>这是一个案例,鼠标滚动实现背景颜色的变化</div>
}
})
ReactDOM.render(<Demo/>,document.getElementById('app'))

三、事件对象

事件对象的使用

  • 通用:所有的事件都有事件属性

image.png

  • 键盘:键盘事件拥有的事件属性

image.png

  • 鼠标:鼠标事件拥有的事件属性

image.png

  • 滚动:滚动事件拥有的事件属性
    • 为什么会有三个,因为有的设备可以实现三个方向的移动

image.png

四、事件与状态关联

1
2
3
4
5
inputChange:function(event){
this.setState({
inputText:event.target.value
})
}
  • 总的来说就是使用this.setState来更新状态,而状态的值因为事件的不同会不同
支持一下
扫一扫,支持poetries