react事件处理

事件绑定

• react事件绑定与DOM事件语法相识
• 语法：on+事件名称={事件处理程序} , 如：onClick={()=>{}}
• 注意react事件都采用驼峰命名法：onMouseEnter、onMouseLeave
  详细可参考react事件总结
  事件机制详细解答可查看史上最全React事件机制详解

注意类组件中使用this指向具体函数名

import React from "react";

//创建类组件
class Hello extends React.Component {
  handleClick(){
    console.log('点击事件')
  }
  render(){
    return (
      <div onClick={this.handleClick}>
        这是一个单独抽离组件
      </div>
    )
  }
}
export default Hello

函数组件中没有this直接使用

function  Hello(){
  function handleClick(){
    console.log('点击事件')
  }
  return (
    <h1 onClick={handleClick}>
    这是一个组件
  </h1>
  )  
}
ReactDOM.render(
  <Hello/>,
  document.getElementById('root')
);

事件对象

• 可以通过事件处理程序的参数获取到事件对象
• react中的事件对象叫做：合成事件（对象）
• 合成事件：兼容所有浏览器，无需担心跨浏览器兼容问题

function  Hello(){
  function handleClick(e){
    //阻止浏览器默认行为
    e.preventDefault()
    console.log('点击事件')
  }
  return (
    <a href='https://www.bilibili.com' onClick={handleClick}>
    这是一个组件
  </a>
  )  
}
ReactDOM.render(
  <Hello/>,
  document.getElementById('root')
);