在 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 is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn