react系列之事件绑定

目录

事件绑定

1. 如何绑定事件

2. 获取事件对象

---

事件绑定

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

1. 如何绑定事件

语法

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

注意点

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

示例

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

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

2. 获取事件对象

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

// 函数组件
function ComFn () {
  // 定义事件回调函数
  const clickHandler = (e) => {
    e.preventDefault()
    console.log('事件被触发了', e)
  }
  return (
    // 绑定事件
    船长在船上博客
  )
}

 

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