React事件处理

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'))