ReactJS - 事件物件

---

---

在 React 中，當我們為按鈕點選等事件構建事件處理程式時，我們會得到一個稱為 React 事件物件（或合成事件）的特殊物件。此物件充當我們的程式碼和瀏覽器事件之間的橋樑。它減少了 Web 瀏覽器之間的差異，並提供了一些重要資訊。

如何使用它？

讓我們使用一個簡單的示例來分解它 -

假設我們在我們的 React 應用中有一個按鈕，我們希望在單擊它時執行某些操作。因此，我們將定義一個 onClick 處理程式函式，如下所示 -

示例

<button onClick={e => {
   console.log(e); // The event object
}} />

在此程式碼中，“e”是我們的 React 事件物件，它提供有關按鈕點選的資訊。

發現事件物件可以做什麼！

讓我們瀏覽一下 React 事件物件實現的一些標準事件屬性 -

示例 - 使用事件物件

讓我們建立一個簡單的應用程式來顯示事件物件屬性的工作原理。因此，在這個應用程式中，我們建立一個名為 EventHandlingExample.js 的元件，然後我們將在 App.js 元件中使用此元件來檢視其工作原理。

EventHandlingExample.js

import React from 'react';

class EventHandlingExample extends React.Component {
   handleClick = (e) => {
      
      // Logging event properties
      console.log('Bubbles:', e.bubbles);
      console.log('Cancelable:', e.cancelable);
      console.log('Current Target:', e.currentTarget);
      console.log('Default Prevented:', e.defaultPrevented);
      console.log('Event Phase:', e.eventPhase);
      console.log('Is Trusted:', e.isTrusted);
      console.log('Target:', e.target);
      console.log('Time Stamp:', e.timeStamp);
      
      // Prevent the default behavior
      e.preventDefault();
   }   
   render() {
      return (
         <div>
            <button onClick={this.handleClick}>Click Me</button>
         </div>
      );
   }
}

export default EventHandlingExample;

App.js

import React from 'react';
import './App.css';
import EventHandlingExample from './EventHandlingExample';
function App() {
   return (
      <div className="App">
         <h1>React Event Object Example</h1>
         <EventHandlingExample />
      </div>
   );
}

export default App;

輸出

在上面的示例程式碼中，當我們單擊“單擊我”按鈕時，事件屬性將記錄在控制檯中。e.preventDefault() 行顯示瞭如何阻止按鈕執行其預設操作。

標準事件方法

讓我們瀏覽一下 React 事件物件實現的一些標準事件方法 -

示例 - 使用事件方法

讓我們建立一個基本的 React 應用，該應用使用事件物件方法來阻止預設行為並在單擊按鈕時停止事件傳播。確保專案包含 React 和 ReactDOM。建立一個名為 EventMethodsExample 的新 React 元件，該元件顯示事件物件方法的使用 -

EventMethodsExample.js

import React from 'react';

class EventMethodsExample extends React.Component {
   handleClick = (e) => {
   
      // Prevent the default behavior of the button
      e.preventDefault();
      
      // Stop the event from propagating
      e.stopPropagation();
   }   
   render() {
      return (
         <div>
            <button onClick={this.handleClick}>Click Me</button>
            <p>Clicking the button will prevent the default behavior and stop event propagation.</p>
         </div>
      );
   }
}

export default EventMethodsExample;

App.js

import React from 'react';
import './App.css';
import EventMethodsExample from './EventMethodsExample';

function App() {
   return (
      <div className="App">
         <h1>React Event Object Methods Example</h1>
         <EventMethodsExample />
      </div>
   );
}

export default App;

輸出

當我們執行 React 應用程式後單擊“單擊我”按鈕時，它會阻止預設行為（如表單提交）並阻止事件進一步向上傳播到 React 元件樹。

此示例演示如何使用事件物件的 preventDefault() 和 stopPropagation() 方法來管理事件行為。

示例 - 使用事件物件和方法

讓我們再建立一個示例應用程式來演示 React 事件物件的使用。在此示例中，我們將建立一個簡單的 React 應用程式，該應用程式響應按鍵事件。

KeyPressExample.js

import React from 'react';

class KeyPressExample extends React.Component {
   handleKeyPress = (e) => {
      
      // Log the key that was pressed
      console.log('Pressed Key:', e.key);
   }   
   render() {
      return (
         <div>
            <h2>React Key Press Event Example</h2>
            <input type="text" placeholder="Press a key" onKeyPress={this.handleKeyPress} />
         </div>
      );
   }
}

export default KeyPressExample;

App.js

import React from 'react';
import './App.css';
import EventHandlingExample from './EventHandlingExample';
import EventMethodsExample from './EventMethodsExample';
import KeyPressExample from './KeyPressExample'; // Import the new component
function App() {
   return (
      <div>
         <h1>React Event Examples</h1>
         <EventHandlingExample />
         <EventMethodsExample />
         <KeyPressExample /> {/* Include the new component */}
      </div>
   );
}

export default App;

輸出

結論

簡單來說，React 事件物件幫助我們以可靠且有效的方式處理使用者互動，確保我們的應用程式在多個 Web 瀏覽器和設定中都能正常執行。