中級：在 React 中處理事件

身為中級開發人員，您應該對 React 中的事件處理有深入的了解，這對於建立互動式和動態應用程式至關重要。本指南將涵蓋高級概念和最佳實踐，包括添加事件處理程序、了解合成事件、向事件處理程序傳遞參數、建立自訂事件以及利用事件委託。

事件處理

在 JSX 中新增事件處理程序

在 React 中，可以直接在 JSX 中新增事件處理程序。事件處理程序是在發生特定事件（例如按一下按鈕或表單提交）時呼叫的函數。在 JSX 中新增事件處理程序與在常規 HTML 中新增事件處理程序類似，但使用 React 的 JSX 語法。

新增事件處理程序的範例：

import React from 'react';

const handleClick = () => {
  alert('Button clicked!');
};

const App = () => {
  return (
    <div>
      <button onclick="{handleClick}">Click Me</button>
    </div>
  );
};

export default App;

在此範例中，每當按一下按鈕時都會呼叫handleClick 函數。 JSX 中的 onClick 屬性用於指定事件處理程序。

綜合事件

React 使用稱為合成事件的系統來處理事件。合成事件是瀏覽器本機事件系統的跨瀏覽器包裝。這可確保事件在不同瀏覽器中表現一致。

合成事件範例：

import React from 'react';

const handleInputChange = (event) => {
  console.log('Input value:', event.target.value);
};

const App = () => {
  return (
    <div>
      <input type="text" onchange="{handleInputChange}">
    </div>
  );
};

export default App;

在此範例中，handleInputChange 函數會在輸入欄位的值發生變更時記錄它。事件參數是一個合成事件，它在所有瀏覽器中提供一致的事件屬性。

將參數傳遞給事件處理程序

有時，您需要將額外的參數傳遞給事件處理程序。這可以使用箭頭函數或綁定方法來完成。

使用箭頭函數的範例：

import React from 'react';

const handleClick = (message) => {
  alert(message);
};

const App = () => {
  return (
    <div>
      <button onclick="{()"> handleClick('Button clicked!')}>Click Me</button>
    </div>
  );
};

export default App;

使用綁定方法的範例：

import React from 'react';

const handleClick = (message) => {
  alert(message);
};

const App = () => {
  return (
    <div>
      <button onclick="{handleClick.bind(null," clicked>Click Me</button>
    </div>
  );
};

export default App;

這兩種方法都允許您向handleClick 函數傳遞附加參數。

自訂事件處理

建立自訂事件

雖然 React 的合成事件涵蓋了大多數典型用例，但您可能需要為更複雜的互動建立自訂事件。可以使用 CustomEvent 建構子和dispatchEvent 方法建立和調度自訂事件。

建立和調度自訂事件的範例：

import React, { useEffect, useRef } from 'react';

const CustomEventComponent = () => {
  const buttonRef = useRef(null);

  useEffect(() => {
    const handleCustomEvent = (event) => {
      alert(event.detail.message);
    };

    const button = buttonRef.current;
    button.addEventListener('customEvent', handleCustomEvent);

    return () => {
      button.removeEventListener('customEvent', handleCustomEvent);
    };
  }, []);

  const handleClick = () => {
    const customEvent = new CustomEvent('customEvent', {
      detail: { message: 'Custom event triggered!' },
    });
    buttonRef.current.dispatchEvent(customEvent);
  };

  return (
    <button ref="{buttonRef}" onclick="{handleClick}">
      Trigger Custom Event
    </button>
  );
};

export default CustomEventComponent;

在此範例中，按一下按鈕時將建立並調度名為 customEvent 的自訂事件。事件處理程序會偵聽自訂事件並顯示帶有事件詳細訊息的警報。

React 中的事件委託

事件委託是一種使用單一事件偵聽器來管理多個元素的事件的技術。這對於有效管理事件非常有用，尤其是在清單或表格中。

事件委託範例：

import React from 'react';

const handleClick = (event) => {
  if (event.target.tagName === 'BUTTON') {
    alert(`Button ${event.target.textContent} clicked!`);
  }
};

const App = () => {
  return (
    <div onclick="{handleClick}">
      <button>1</button>
      <button>2</button>
      <button>3</button>
    </div>
  );
};

export default App;

在此範例中，div 元素上的單一事件處理程序管理所有按鈕的按一下事件。事件處理程序檢查 event.target 以確定單擊了哪個按鈕並相應地顯示警報。

React 中事件處理的最佳實踐

1. 明智地使用事件處理程序：避免在渲染方法中建立新的事件處理程序函數，因為這可能會導致效能問題。相反，請在渲染方法之外定義事件處理程序。

2. 防止預設行為： 在必要時使用 event.preventDefault() 來防止事件的預設行為，例如表單提交或錨標記點擊。
   

   const handleSubmit = (event) => {
     event.preventDefault();
     // Handle form submission
   };

   return 

...

;

1. 停止傳播： 在需要時使用 event.stopPropagation() 停止向父元素傳播事件。

   const handleButtonClick = (event) => {
     event.stopPropagation();
     // Handle button click
   };

   return <button onclick="{handleButtonClick}">Click Me</button>;

1. 去抖動和限制：使用去抖動或限制技術來限制滾動或調整大小等高頻事件調用事件處理程序的次數。

2. 清理事件監聽器：將事件監聽器直接加入 DOM 元素（特別是在類別元件或鉤子中）時，請確保清理它們以避免記憶體洩漏。
   

   useEffect(() => {
     const handleResize = () => {
       // Handle resize
     };

     window.addEventListener('resize', handleResize);

     return () => {
       window.removeEventListener('resize', handleResize);
     };
   }, []);

結論

在 React 中處理事件對於建立互動式應用程式至關重要。透過了解如何新增事件處理程序、使用合成事件、將參數傳遞給事件處理程序、建立自訂事件以及利用事件委託，您可以建立更動態且高效的 React 應用程式。實施最佳實務可確保您的應用程式在複雜性增加時保持高效能和可維護性。作為中級開發人員，掌握這些技術將增強您處理複雜互動的能力，並有助於專案的成功。

以上是中級：在 React 中處理事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！