ReactJS - 事件管理

事件只是使用者與任何應用程式互動時執行的一些操作。它們可以是最小的操作，例如將滑鼠指標懸停在觸發下拉選單的元素上、調整應用程式視窗大小或拖放元素以上傳它們等。React 中的事件分為三類

滑鼠事件 − onClick、onDrag、onDoubleClick
鍵盤事件 − onKeyDown、onKeyPress、onKeyUp
焦點事件 − onFocus、onBlur

對於這些事件中的每一個，JavaScript 都提供響應。因此，每次使用者執行事件時，通常都需要應用程式做出某種型別的反應；這些反應被定義為一些函式或程式碼塊，稱為事件處理程式。使用事件處理程式處理事件的整個過程稱為事件管理。

ReactJS 中的事件管理

事件管理是 Web 應用程式中的重要功能之一。它使使用者能夠與應用程式互動。React 支援 Web 應用程式中可用的所有事件。React 事件處理與 DOM 事件非常相似，只有細微的差別。以下是可以在基於 React 的網站上觀察到的一些常見事件：

單擊元件。
滾動當前頁面。
將滑鼠懸停在當前頁面的元素上。
提交表單。
重定向到另一個網頁。
載入影像。

合成 React 事件

在 JavaScript 中，當指定事件時，您將處理稱為合成事件的 React 事件型別，而不是常規 DOM 事件。SyntheticEvent 是本機事件例項的簡單跨瀏覽器包裝器，使事件在所有瀏覽器中都能以相同的方式工作。所有事件處理程式都必須作為此包裝器的例項傳遞。但是，就 CPU 資源而言，它成本很高，因為每個建立的合成事件都需要進行垃圾回收。每個合成事件物件都具有以下屬性：

布林值 bubbles
布林值 cancelable
DOMEventTarget currentTarget
布林值 defaultPrevented
數字 eventPhase
布林值 isTrusted
DOMEvent nativeEvent
void preventDefault()
布林值 isDefaultPrevented()
void stopPropagation()
布林值 isPropagationStopped()
void persist()
DOMEventTarget target
數字 timeStamp
字串 type

由於合成事件使用了大量資源，因此它們通常會被重用，並且在呼叫事件回撥後，其所有屬性都將被清除，以最佳化其在瀏覽器中的效能。SyntheticEvent 與本機事件具有相同的介面。由於合成事件由文件節點授權，因此先觸發本機事件，然後觸發合成事件。

新增事件

正如我們已經看到的，React 具有與 HTML 相同的事件：click、change、mouseover 等。但是，React 事件是用 camelCase 定義的，反應寫在花括號內。新增事件的語法在函式式元件和類元件中有所不同。

以下是向 React 函式式元件新增 onClick 事件的語法

onClick = {action to be performed}

以下是向 React 類元件新增 onClick 事件的語法

onClick = {this.action_to_be_performed}

處理事件

現在讓我們學習如何透過以下分步過程在 React 應用程式中處理這些事件。

定義一個事件處理程式方法來處理給定的事件。

log() { 
   console.log("Event is fired"); 
}

React 提供了一種使用 lambda 函式定義事件處理程式的替代語法。lambda 語法為：

log = () => { 
   console.log("Event is fired"); 
}

向事件處理程式傳遞引數

有兩種方法可以向事件處理程式傳遞引數

箭頭方法
繫結方法

箭頭方法

如果要了解事件的目標，則在處理程式方法中新增引數e。React 將把事件目標詳細資訊傳送到處理程式方法。

log(e) { 
   console.log("Event is fired"); 
   console.log(e.target); 
}

替代 lambda 語法為：

log = (e) => { 
   console.log("Event is fired"); 
   console.log(e.target); 
}

如果要在事件期間傳送額外的詳細資訊，則將額外詳細資訊作為初始引數新增，然後為事件目標新增引數(e)。

log(extra, e) { 
   console.log("Event is fired"); 
   console.log(e.target); 
   console.log(extra); 
   console.log(this); 
}

替代 lambda 語法如下：

log = (extra, e) => { 
   console.log("Event is fired"); 
   console.log(e.target); 
   console.log(extra); 
   console.log(this); 
}

繫結方法

我們還可以將事件處理程式方法繫結到元件的建構函式中。這將確保在事件處理程式方法中可以使用this。

constructor(props) { 
   super(props); 
   this.logContent = this.logContent.bind(this); 
}

如果事件處理程式是在替代 lambda 語法中定義的，則不需要繫結。this 關鍵字將自動繫結到事件處理程式方法。

為特定事件設定事件處理程式方法，如下所示：

<div onClick={this.log}> ... </div>

要設定額外引數，請繫結事件處理程式方法，然後將額外資訊作為第二個引數傳遞。

<div onClick={this.log.bind(this, extra)}> ... </div>

替代 lambda 語法如下：

<div onClick={this.log(extra, e)}> ... </div>

這裡：

列印頁面