React 组件-事件绑定、传参、获取对象e、阻止默认行为

学习目标： 能够独立绑定任何事件并能获取到事件对象

1. 如何绑定事件
    - 语法
     on + 事件名称={事件处理程序}，比如：
   {}}>
   
    - 注意点
     react 事件采用驼峰命名法，比如 onMouseEnter、onFocus
    - 示例

import React from 'react'
// 函数组件
function HelloFn() {
  // 定义事件回调函数
  const clickhandler = () => {
    console.log('触发了点击事件！')
  }
  return (
    //绑定事件给button
    <button onClick={clickhandler}>click</button>
  )
}
//类组件
class HelloCpmponent extends React.Component {
  clickhandler = () => {
    console.log('触发了类的点击事件！')
  }
  render() {
    return <div onClick={this.clickhandler}>this is class Component</div>
  }
}

function App() {
  return (
    <div>
      <HelloFn></HelloFn>
      <HelloCpmponent />
    </div>
  )
}

export default App

组件-获取事件对象 e

 - 通过事件处理程序的参数获取事件对象 e

// 函数组件
function HelloFn() {
  // 定义事件回调函数
  const clickhandler = (e) => {
    e.preventDefault() //阻止默认行为
    console.log('事件被触发了', e)
  }
  return (
    <a href="http://www.baidu.com/" onClick={clickJandler}>
      百度
    </a>
  )
}

组件-事件绑定传递额外参数（自定义参数）

function Hello(){
  const clickHandler = (e,msg) => {
    console.log('触发了点击事件',e,msg)
  }
  return (
    <button onClick={(e)=>clickHandler(e,'this is message')}>
  )
}