1.事件绑定
- React 事件绑定语法与DOM事件语法相似
- 语法:on+事件名称={事件处理程序},比如onClick={()=>{}}
- 注意:React事件采用驼峰命名法,比如:onMouseEnter、onFocus
- 在函数组件中绑定事件:
class App extends React.Component{
handerClick(){
console.log('单击事件触发了')
}
render(){
return(
<button onClick={this.handerClick()}>点击我</button>)
}
}
ReactDOM.render(<App></App>,document.getElementById('root'))
1.1事件对象
- 可以通过事件处理程序中的参数获取到事件对象
- React中的事件对象叫做:合成事件(对象)
- 合成事件:兼容所有浏览器、无需担心跨浏览器兼容性问题
function App(){
function handerClick(e){
e.preventDefault()//阻止默认行为
console.log('被点击了',e)
}
return(
<a onClick={handerClick}> https://www.bilibili.com </a>
)
}
ReactDOM.render(<App></App>,document.getElementById('root'))