在 React 中新增事件監聽器

1. 在 React 中為元素新增事件監聽器
2. 在 React 中新增自定義事件監聽器

單頁應用程式因其速度和可靠性而在今天很普遍，而 React 是構建它們的主要庫。事件偵聽器和事件處理函式為 SPA 提供了基本功能。

React 支援處理與 DOM 中相同的事件。有一些關鍵區別，例如處理函式的屬性名稱的命名約定。

在 React 中，事件處理程式名稱使用 camelCase 約定命名。此外，由於 JSX 中的花括號，我們可以直接傳遞 JavaScript 函式，而不是像在 HTML 中那樣傳遞表示函式的字串。

在 React 中為元素新增事件監聽器

常規 DOM 中的 EventTarget 介面包括 addEventListener() 方法，通常用於為特定 HTML 元素設定事件偵聽器。

React 開發人員不必使用此方法，並且可以在宣告式定義 JSX 中的元素時新增事件偵聽器。

讓我們看一個例子。

export default function App() {
  return <button onClick={() => alert("hey")}>A sample button</button>;
}

這是 React 中事件監聽器最基本的例子。onClick 不是唯一可能的事件偵聽器，你可以偵聽更多事件。

事件偵聽器屬性的值可以是行內函數，如上例所示。但是，僅當它是單行表示式時，才能直接將函式作為事件處理程式傳遞。

大多數情況下，onClick 事件偵聽器的值將引用一個多行函式，每次單擊按鈕時都需要執行該函式。

對於功能元件，事件處理程式通常儲存在變數中。對於類元件，它可以是兩者，但它通常是例項上的屬性。

當在類元件的函式中使用時，你應該知道 this 關鍵字指的是什麼。可能需要使用 bind() 函式。

使用箭頭函式獲得更多可預測的行為。

React 和常規 DOM 事件處理程式之間的另一個區別是它們需要顯式呼叫 e.preventDefault() 方法來停止元素的預設行為。

在 React 中新增自定義事件監聽器

React 原生支援許多不同的事件。你不太可能需要在 React 中新增任何自定義事件偵聽器。

你可以獲得支援的事件偵聽器的完整列表在這個頁面。但是，如果你需要一個不受支援的事件偵聽器，你仍然可以使用 addEventListener() 和 removeEventListener() 方法新增自定義事件偵聽器。

但是，它需要在生命週期方法中完成，以控制在安裝元素時新增事件處理程式，並在解除安裝元素時刪除事件處理程式。

componentDidMount() {
    this.el.addEventListener("el-hover", this.handleNvEnter);
  }

componentWillUnmount() {
    this.el.removeEventListener("el-hover", this.handleNvEnter);
  }

在這個例子中，el 是 React 應用程式中任何特定元素的替代。

當 React 應用程式在元件生命週期的最後階段首次安裝和刪除時，我們使用 window 介面中的 addEventListener() 和 removeEventListener() 方法新增自定義事件偵聽器。