React事件处理

事件绑定

• React事件绑定语法与DOM时间相似
• 语法: on + 事件名称 = {事件处理程序}, 比如: onClick = {() => {}}
• 注意: React事件采用驼峰命名法,比如: onMouseEnter, onFocus

示例

类组件绑定事件

class Hello extends React.Component {
  handlerClick() {
    console.log('触发单击事件');
  }
  render() {
    return(
      <button onClick={this.handlerClick}>点击事件示例</button>
    )
  }
}

函数组件绑定事件

function App() {
  function handlerClick() {
    console.log('触发单击事件');
  }
  return (
    <button onClick={handlerClick}>点击事件示例</button>
  )
}

事件对象

• 可以通过事件处理程序的参数获取到事件对象
• React中的事件对象叫做: 合成事件(对象)
• 合成时间: 兼容所有浏览器,无需担心跨浏览器兼容性问题

事件对象的使用案例

通过事件对象组织浏览器的默认跳转行为

class Hello extends React.Component {
  handlerClick(e) {
    e.preventDefault()
    console.log(e, '触发单击事件');
  }
  render() {
    return(
      <a href="www.baidu.com" onClick={this.handlerClick}>阻止浏览器默认行为</a>
    )
  }
}