在 React 中新增事件監聽器

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. 在 React 中為元素新增事件監聽器
  2. 在 React 中新增自定義事件監聽器
在 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() 方法新增自定義事件偵聽器。

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn

相關文章 - React Event