React学习--- 事件处理

React学习— 事件处理

1.事件绑定

// onClick={function(){}}
// onClick={()=>{}}
// onClick={this.handleClick}
1
2
3

需要注意:

1.事件名必须符合驼峰命名法

2.事件值必须绑定一个函数 即 {handleClick}, 不能是字符串形式 “handleClick”

3.可以是匿名函数

2.事件对象

run=(event)=>{
 alert( event.target ) //获取 dom 节点
}
render(){
 return(
 <div>
 <button aid="123" onClick={this.run}>事件对象</button>
 </div>
 )
} 
1
2
3
4
5
6
7
8
9
10

3.事件方法传参

在给方法传递新参数时，方法原有的参数会排在新参数之后.

run=(param, event)=>{
 alert( param , event.target ) //获取 dom 节点
}
render(){
 return(
 <div>
 <div aid="123" onClick={ ()=>{ this.run(100) } }>登陆</div>
 </div>
 )
} 
1
2
3
4
5
6
7
8
9
10

传参：

 onClick={function(){  }}
1

onClick={()=>{ }}
1

 onClick={()=>{ this.handleClick(index) }}
1

4.this指向问题

什么情况下this会出现问题？

有回调函数的场景中this就有可能出错，常规解决办法有箭头函数、bind改变this指向

4.1. constructor 或 render 里面重新 bind

constructor(props){
 super(props);
 this.state = {}
 this.login.bind(this);
}
<div onClick={ this.login() }>登陆</div>
1
2
3
4
5
6

4.2. 箭头函数

onClick={()=>{}}
1

4.3. 行内定义事件使用 bind 绑定 this

onClick={function(){}.bind(this)}
1

onClick={this.handleClick.bind(this)}
1

5.合成事件

react绑定的所有事件都不是原生事件，是对原生事件进行封装，合成事件：做了兼容性处理又做了中间层

​ 如果 DOM 上绑定了过多的事件处理函数，整个页面响应以及内存占用可能都会受到 影响。React 为了避免这类 DOM 事件滥用，同时屏蔽底层不同浏览器之间的事件系统差 异，实现了一个中间层——SyntheticEvent。

​ 当用户在为 onClick 添加函数时，React 并没有将 Click 时间绑定在 DOM 上面。

​ 而是在 document处监听所有支持的事件，当事件发生并冒泡至 document处时，React 将事件内容封装交给中间层 SyntheticEvent（负责所有事件合成）

​ 所以当事件触发的时候，对使用统一的分发函数 dispatchEvent 将指定函数执行。

​ 注意: 不要将原生事件（addEventListener）和 React 合成事件一起混合使用，这两 个机制是不一样的

6.React 支持的事件类型

键盘事件 onKeyDown onKeyPress onKeyUp

焦点事件 onFocus onBlur

表单事件 onChange onInput onSubmit

鼠标事件 onClick onContextMenu onDoubleClick onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove onMouseEnter onMouseLeave onDrag

选择事件 onSelect

触摸事件 onTouchCancel onTouchEnd onTouchMove onTouchStart

UI 事件 onScroll

动画事件 onAnimationStart onAnimationEnd onAnimationIteration

图像事件 onLoad onError

媒体事件 onPause onPlay onCanPlay onLoadStart onProgress

剪贴板事件 onCopy onCut onPaste