1.事件绑定
需要注意:
1.事件名必须符合驼峰命名法
2.事件值必须绑定一个函数 即 {handleClick}, 不能是字符串形式 “handleClick”
3.可以是匿名函数
2.事件对象
run=(event)=>{
alert( event.target )
}
render(){
return(
<div>
<button aid="123" onClick={this.run}>事件对象</button>
</div>
)
}
3.事件方法传参
在给方法传递新参数时，方法原有的参数会排在新参数之后.
run=(param, event)=>{
alert( param , event.target )
}
render(){
return(
<div>
<div aid="123" onClick={ ()=>{ this.run(100) } }>登陆</div>
</div>
)
}
传参：
onClick={function(){ }}
onClick={()=>{ }}
onClick={()=>{ this.handleClick(index) }}
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>
4.2. 箭头函数
onClick={()=>{}}
4.3. 行内定义事件使用 bind 绑定 this
onClick={function(){}.bind(this)}
onClick={this.handleClick.bind(this)}
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
Original: https://blog.csdn.net/m0_53181852/article/details/127809321
Author: 茹嗨瑞
Title: React学习— 事件处理
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/653388/
转载文章受原作者版权保护。转载请注明原作者出处！