React (9) 事件綁定

發表於 分類於
介紹 React 事件綁定方法

綁定事件

1
2
3
4
5
6
7
8
9
10
11
export default function Button() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

在 react 中綁定事件流程

  1. 在元件內定義方法(handler)
  2. 方法內寫事件觸發時要做的事
  3. 將方法綁定到元素上

也可以將方法直接寫在 jsx 內

1
2
3
<button onClick={function handleClick() {
  alert('You clicked me!');
}}>

綁定事件而非呼叫事件

在 jsx 內應該要傳入的是方法，而不是呼叫方法，差異如下:

傳入方法(正確) 呼叫方法(錯誤)
<button onClick={handleClick}> <button onClick={handleClick()}>
<button onClick={() => alert('...')}> <button onClick={alert('...')}>

在第一個例子中，handleClick 當作方法傳入， click 時才觸發，handleClick() 則是在模板渲染時就觸發，是錯誤的。

帶入參數

綁定方法時也可以帶入參數

1
2
3
4
5
6
7
function AlertButton({ message, children }) {
  return (
    <button onClick={() => alert(message)}>
      {children}
    </button>
  );
}

事件傳遞

1
2
3
4
5
6
7
8
9
10
11
12
13
14
export default function Toolbar() {
  return (
    <div className="Toolbar" onClick={() => {
      alert('You clicked on the toolbar!');
    }}>
      <button onClick={() => alert('Playing!')}>
        Play Movie
      </button>
      <button onClick={() => alert('Uploading!')}>
        Upload Image
      </button>
    </div>
  );
}

上面範例中， 點擊 button 後，因為事件冒泡的關係，父層的 alert 也會觸發

  • React 的事件處理默認在冒泡階段處理，即事件會從子元素傳播到父元素。
  • 這與原生 DOM 行為相似，但 React 透過一種稱為「合成事件」的機制來統一處理跨瀏覽器的事件。
    阻止事件傳播：

如果想要阻止事件在冒泡階段繼續傳播，可以在事件處理函數中調用 event.stopPropagation()：

1
2
3
4
function handleClick(event) {
  event.stopPropagation();
  // 其他邏輯
}

阻止預設行為

  1. 預設行為：
  • 某些 HTML 元素有特定的預設行為。例如：
    • 點擊一個鏈接（<a>）會導航到該鏈接的 URL。
    • 提交表單（<form>）會導致頁面重新加載。
  1. 如何阻止預設行為：
    使用 event.preventDefault() 方法可以阻止這些元素的預設行為。例如，當你點擊一個鏈接時，可以防止頁面跳轉：
1
2
3
4
function handleClick(event) {
  event.preventDefault();
  console.log('Link clicked, but navigation prevented.');
}