方格子 vocus

React JS #6 | 事件處理

koko

發佈於React

2025/04/30 更新2025/04/30 發佈閱讀 8 分鐘

undefined on Tenor

React 事件處理：讓網頁動起來~

網頁的互動性是吸引使用者、提供良好體驗的關鍵。

在 React 中，透過監聽使用者的操作（例如點擊、滑鼠移動、鍵盤輸入），並執行相應的程式碼，來實現豐富的互動效果。

React 中的事件綁定

在 React 中，事件綁定與傳統的 HTML 有些不同。React 使用駝峰式命名法 (camelCase) 來命名事件，例如 onClick、onChange、onMouseOver 等。

function MyButton() {
  function handleClick() {
    alert('Button clicked!');
  }

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

合成事件 (Synthetic Events)

React 的合成事件是對原生瀏覽器事件的包裝。它們具有跨瀏覽器的一致性，並提供了一些額外的特性，例如自動的事件池化 (event pooling) 和阻止事件冒泡 (stopping event propagation)。

常用的合成事件包括：

onClick：點擊事件
onChange：輸入框內容改變事件
onSubmit：表單提交事件
onMouseOver：滑鼠移入事件
onMouseOut：滑鼠移出事件
onKeyDown：鍵盤按下事件
onKeyUp：鍵盤鬆開事件

事件處理函式的撰寫

在 React 中，事件處理函式通常定義在元件內部，並且需要注意以下幾點：

this 的指向：在類別元件中，事件處理函式需要使用 .bind(this) 來綁定 this 的指向，或者使用箭頭函式來定義。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this); // 綁定 this
  }

  handleClick() {
    console.log('Button clicked!');
  }

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

// 或者使用箭頭函式
class MyComponent extends React.Component {
  handleClick = () => {
    console.log('Button clicked!');
  }

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

傳遞事件物件：事件處理函式會接收一個事件物件 (event object) 作為參數，該物件包含了事件的相關資訊，例如觸發事件的元素、事件類型、滑鼠位置等。

function MyInput() {
  function handleChange(event) {
    console.log(event.type); // 事件類型
    console.log(event.target); // 觸發事件的元素
    console.log('Input value:', event.target.value); //獲取輸入框的內容
  }

  return (
    <input type="text" onChange={handleChange} />
  );
}

阻止預設行為：有時候需要阻止事件的預設行為，例如阻止表單提交時的頁面重新整理，可以使用 event.preventDefault() 方法。

function handleSubmit(event) {
  event.preventDefault(); // 阻止表單提交的預設行為
  console.log('Form submitted!');
}

停止事件傳播：如果需要阻止事件冒泡，可以使用 event.stopPropagation() 方法。

function InnerComponent() {
  function handleClick(event) {
    event.stopPropagation(); // 阻止事件冒泡到父元素
    alert('Inner component clicked!');
  }

  return (
    <div onClick={handleClick} style={{ backgroundColor: 'lightblue' }}>
      Inner Component
    </div>
  );
}

function OuterComponent() {
  function handleClick() {
    alert('Outer component clicked!');
  }

  return (
    <div onClick={handleClick} style={{ backgroundColor: 'lightgreen' }}>
      Outer Component
      <InnerComponent />
    </div>
  );
}

function App() {
  return <OuterComponent />;
}

事件委託 (Event Delegation)

事件委託是一種優化事件處理的技巧。它將事件處理函式綁定到父元素上，而不是每個子元素上。當子元素觸發事件時，事件會冒泡到父元素，由父元素統一處理。

事件委託的優點：

減少事件處理函式的數量：只需要一個事件處理函式，就可以處理多個子元素的事件。
提高效能：減少了事件綁定的數量，降低了記憶體消耗。
更容易處理動態新增的元素：新增的子元素不需要重新綁定事件處理函式。

function MyList() {
  function handleClick(event) {
    if (event.target.tagName === 'LI') {
      console.log('List item clicked:', event.target.textContent);
    }
  }

  return (
    <ul onClick={handleClick}>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  );
}