React - 事件绑定

1. 基础事件绑定

语法：on + 事件名称 = { 事件处理方法/函数 }

function App() {
  const clickHandler = () => {
    alert('事件绑定')
  }

  return (
    <div className="App">
      <button onClick={clickHandler}>Click</button>
    </div>
  )
}

export default App

2. 使用事件对象参数

function App() {
  const clickHandler = (e) => {
    alert('事件绑定')
    console.log('事件参数', e)
  }

  return (
    <div className="App">
      <button onClick={clickHandler}>Click</button>
    </div>
  )
}

export default App

3. 传递自定义参数

语法：绑定事件时改造为箭头函数（通过函数引用的方式实现），通过形参传递

function App() {
  const clickHandler = (name) => {
    console.log('自定义参数', name)
  }

  return (
    <div className="App">
      <button onClick={() => clickHandler('孙笑川')}>Click</button>
    </div>
  )
}

export default App

4. 同时传递事件对象和自定义参数

语法：在绑定事件的位置传递事件实参 e，clickHandler 中声明形参，且需要注意参数的顺序

function App() {
  const clickHandler = (name, e) => {
    console.log('自定义参数', name, '事件参数', e)
  }

  return (
    <div className="App">
      <button onClick={(e) => clickHandler('孙笑川', e)}>Click</button>
    </div>
  )
}

export default App