9.React事件处理

• 9.React事件处理
  • 1.事件绑定
  • 2.事件对象

1.事件绑定

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

class App extends React.Component {
  handleClick() {
    console.log('单击事件触发了')
  }
  render() {
    return (
    	<button onClick={this.handleClick}>点我</button>
    )
  }
}

• 在函数组件中绑定事件:

function App() {
  function handleClick() {
    console.log('单击事件触发了')
  }
  
  return (
    <button onClick={handleClick}>点我</button>
  )
}

2.事件对象

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

function handleClick(e) {
  e.preventDefault()
  console.log('事件对象',e)
}

<a onClick={handleClick}>点我, 不会跳转页面</a>