react系列之事件绑定

目录

 

事件绑定

1. 如何绑定事件

2. 获取事件对象

---

 

事件绑定

说明：能够独立绑定任何事件并能获取到事件对象e

1. 如何绑定事件

• 语法

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

• 注意点

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

• 示例

 

// 函数组件
function ComFn () {
  // 定义事件回调函数
  const clickHandler = () => {
    console.log('事件被触发了')
  }
  return (
    // 绑定事件
    <button onClick={clickHandler}>click me!</button>
  )
}

// 类组件
class ComC extends React.Component {
  // 定义事件回调函数
  clickHandler = () => {
    console.log('事件被触发了')
  }
  render () {
    return (
      // 绑定事件
      <button onClick={this.clickHandler}>click me!</button>
    )
  }
}

 

2. 获取事件对象

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

// 函数组件
function ComFn () {
  // 定义事件回调函数
  const clickHandler = (e) => {
    e.preventDefault()
    console.log('事件被触发了', e)
  }
  return (
    // 绑定事件
    <a href="https://mp.csdn.net/mp_blog/manage/article" onClick={clickHandler}>船长在船上博客</a>
  )
}

 

 

感谢各位点赞、收藏、评论、关注支持一下呗