react事件处理
- this.clickHandler.bind(this) ,不懂的看一下Function的bind,修改this指向
- 箭头函数【没有this】
- react合成事件与原生事件
- 关于event 参数
- react16 事件绑定到 document
react17 事件绑定到 root【有利于多个React版本共存,例如微前端】
以下是代码实践
import React from 'react';
class Basics02 extends React.Component{
constructor(props) {
super(props);
this.state = {
list:[
{
id:1,
msg:'x1'
},
{
id:2,
msg:'x2'
},
]
}
this.clickHandler = this.clickHandler.bind(this)
}
render() {
return (
<>
<ul>
{
this.state.list.map(v => {
return <li key={v.id} onClick={this.clickHandler}>{v.msg}</li>
})
}
</ul>
<hr/>
<ul>
{
this.state.list.map(v => {
return <li key={v.id} onClick={this.clickHandler2}>{v.msg}</li>
})
}
</ul>
<hr/>
<a onClick={this.clickHandler3} href='https://www.baidu.com'>百度</a>
<hr/>
<a onClick={this.clickHandler4.bind(this,1,2)} href='https://www.baidu.com'>百度2</a>
</>
)
}
clickHandler(){
console.log('clickHandler this',this)
}
clickHandler2 = () => {
console.log('clickHandler2 this',this)
}
clickHandler3 = (event) => {
event.preventDefault()
event.stopPropagation()
console.log('target', event.target)
console.log('current target', event.currentTarget)
console.log('event', event)
console.log('event.__proto__.constructor', event.__proto__.constructor)
console.log('nativeEvent', event.nativeEvent)
console.log('nativeEvent target', event.nativeEvent.target)
console.log('nativeEvent current target', event.nativeEvent.currentTarget)
}
clickHandler4(a,b,event) {
event?.preventDefault()
event?.stopPropagation()
console.log(a,b,event)
}
}
export default Basics02