事件繫結

北有麋鹿發表於2024-07-17
事件

1.React中的事件繫結，透過語法 on + 事件名稱 = { 事件處理程式 }，整體上遵循駝峰命名法

function App(){
  const clickHandler = ()=>{
    console.log('button按鈕點選了')
  }
  return (
    <button onClick={clickHandler}>click me</button>
  )
}

2.事件引數，在事件回撥函式中設定形參e即可

function App(){
  const clickHandler = (e)=>{
    console.log('button按鈕點選了', e)
  }
  return (
    <button onClick={clickHandler}>click me</button>
  )
}

3.自定義引數，需要改造成箭頭函式的寫法，在執行clickHandler實際處理業務函式的時候傳遞實參，不能直接寫函式呼叫，這裡事件繫結需要一個函式引用

function App(){
  const clickHandler = (name)=>{
    console.log('button按鈕點選了', name)
  }
  return (
    <button onClick={()=>clickHandler('jack')}>click me</button>
  )
}

4.同時傳遞事件引數和自定義引數

function App(){
  const clickHandler = (name,e)=>{
    console.log('button按鈕點選了', name,e)
  }
  return (
    <button onClick={(e)=>clickHandler('jack',e)}>click me</button>
  )
}

相關文章