React事件

1. 事件绑定

语法：on+事件名称={事件处理程序}，比如：onClick={() => {}}

注意：React事件采用驼峰命名法，比如：onMouseEnter、onFocus

类组件：

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  React事件处理
*/

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

//渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

函数组件：

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  React事件处理
*/

//通过函数组件绑定事件
function App() {
  //事件处理程序
  function handleClick() {
    console.log('单击事件触发了')
  }

  return (
    <button onClick={handleClick}>点我</button>
  )
}

//渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

2.事件对象

　　可以通过事件处理程序的参数获取到事件对象

　　React中的事件对象叫做：合成事件(对象)

　　合成事件：兼容所有浏览器，无需担心跨浏览器兼容性问题

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  React事件对象
*/

class App extends React.Component {
  handleClick(e) {
    //阻止浏览器的默认行为
    e.preventDefault()
    
    console.log('a标签的单击事件触发了')
  }
  render () {
    return (
      <a href="http://www.baidu.com" onClick={this.handleClick}>百度</a>
    )
  }
}

//渲染组件
ReactDOM.render(<App />, document.getElementById('root'))