react组件事件绑定、获取事件对象及传递额外参数

一、函数组件事件绑定、获取事件对象

语法：

on + 事件名称 = { 事件处理程序 } ，比如：<div onClick={ onClick }></div>

1、事件绑定

// 函数组件
function Hello(){
  const clickHe = () => {
    console.log('函数组件事件！')
  }
  return <div onClick={clickHe}>Hello</div>
}

function App() {
  return (
    <div className="App">
      <Hello/>
    </div>
  );
}

export default App;

2、获取事件对象

// 函数组件
function Hello(){
  const clickHe = (e) => {
    // 阻止默认行为
    e.preventDefault()
    console.log('函数组件事件！',e)
  }
  return <div>
    <a onClick={clickHe} href="http://baidu.com">百度</a>
  </div>
}

function App() {
  return (
    <div className="App">
      <Hello/>
    </div>
  );
}

export default App;

二、类组件事件绑定、获取事件对象

1、事件绑定

要借助关键词this获取

import React from "react";
// 类组件
class HelloComponent extends React.Component{
  // 事件回调函数(标准写法 避免this指向问题)
  clickHander = () => {
    console.log('类组件事件！')
  }
  render() {
    return <div onClick={this.clickHander}>类组件</div>
  }
}
function App() {
  return (
    <div className="App">
      <HelloComponent/>
    </div>
  );
}

export default App;

2、获取事件对象

import React from "react";

// 类组件
class HelloComponent extends React.Component{
  clickHander = (e) => {
    console.log('类组件事件！',e)
  } 
  render() {
    return <div onClick={this.clickHander}>类组件</div>
  }
}
function App() {
  return (
    <div className="App">
      <HelloComponent/>
    </div>
  );
}

export default App;

三、传递额外参数

// 函数组件
function Hello(){
  // 传递自定义参数
  const clickDiv = (text) => {
    console.log('函数组件自定义参数事件',text)
  }
  // 事件对象及自定义参数传递
  const clickEDiv = (e,text) => {
    console.log('事件对象及自定义参数传递事件',e,text)
  }
  return <div>
    <div onClick={() => clickDiv('传递的数据1')}>传递自定义参数</div>
    <div onClick={(e) => clickEDiv(e,'传递的数据2')}>事件对象及自定义参数传递</div>
  </div>
}
function App() {
  return (
    <div className="App">
      <Hello/>
    </div>
  );
}

export default App;