EP02 | React 18 全家桶複習 - 事件綁定

再次重申： 本篇記錄只單紀錄 Function Component 的事件綁定。

事件綁定基本語法

事件的名稱在 React 中都是 camelCase，而在 HTML DOM 中則是小寫。
所以 onclick => onClick，onchange => onChange 以此類推。

• 將方法直接寫在標籤上

  function App() {
    return (
      <div>
        <input onChange={() => {console.log("第一種事件調用方法!!!")}} />
      </div>
    )
  }

  當事件綁定的方法過多時，標籤內代碼會顯得很複雜。

• 透過變量帶入: 建議使用此種方法

  function App() {
    const handleChange = () => {
      console.log("第二種事件調用方法!!!");
    }
  
    return (
      <div>
        <input onChange={handleChange} />
      </div>
    )
  }

  或

  function App() {
    const handleChange = () => {
      console.log("第二種事件調用方法!!!");
    }
  
    return (
      <div>
        <input onChange={() => { handleChange() }} />
      </div>
    )
  }

  類似方法:

  function App() {
    function handleChange() {
      console.log("第二種事件調用方法變形!!!");
    }
  
    return (
      <div>
        <input onChange={handleChange} />
      </div>
    )
  }

加上參數

如果有參數的情況下，須將參數作為回調的參數帶入，事件發生時，執行回調函數內的代碼。

function App() {
  const handleChange = (參數) => {
    console.log("只能通過事件回調帶入參數，並將該參數帶入要執行的函數內");
  }

  return (
    <div>
      <input onChange={(參數) => { handleChange(參數) }} />
    </div>
  )
}

重點講解: 事件的值在 JSX 中是一個 function

function App() {
  const handleChange = (參數) => {
    console.log("只會在頁面渲染時，發生一次。");
  }

  return (
    <div>
      <input onChange={handleChange(參數)} />
    </div>
  )
}

會發生錯誤的原因，是因為在頁面載入時，該 handleChange(參數) 會先被調用，且並無返回值或可以說返回值為 undefind，所以當事件發生，想要去調用方法時，會發現沒有東西可以給他調用了。

完成頁面載入後⬇️⬇️⬇️

function App() {
  const handleChange = (參數) => {
    console.log("只會在頁面渲染時，發生一次。");
  }

  return (
    <div>
      <input onChange={handleChange(參數)-- 頁面載入完成後，值會變成 undefind } />
    </div>
  )
}

補充知識
React 事件綁定是採用事件代理(冒泡)的模式，並非直接綁定在 target 元素上。
打開瀏覽器中的事件監聽器嘗試將綁定的元素移除後會發現該事件還是能被調用，但是把 在 #root 上的事件移除後，就不能被使用了(正名事件是綁在 #root 上)。
在調用的方法上一樣可以使用阻止冒泡( event.stopPropagation() )及默認( event.preventDefault() )行為的方法。