ReactJS - 指標事件處理程式

---

---

當我們使用 React 時，我們可能希望對使用者互動（如點選或觸控）做出響應。指標事件可以幫助我們做到這一點。

在 React 中，我們建立一個函式（通常稱為事件處理程式）來處理這些互動。當用戶使用其指標裝置（如滑鼠或觸控板）執行某些操作時，此函式將被觸發。

PointerEvent 類表示由不同輸入裝置（如滑鼠、筆和觸控式螢幕）生成的事件。這些事件提供有關指標的資訊，例如其位置、裝置型別、壓力、傾斜度和其他特性。

語法

<div
   onPointerEnter={e => console.log('onPointerEnter')}
   onPointerMove={e => console.log('onPointerMove')}
   onPointerDown={e => console.log('onPointerDown')}
   onPointerUp={e => console.log('onPointerUp')}
   onPointerLeave={e => console.log('onPointerLeave')}
/>

引數

e - 它是一個 React 事件物件。

PointerEvent 的屬性

以下是 PointerEvent 的一些重要屬性 -

示例

首先，讓我們建立一個簡單的 React 應用程式。要建立 React 應用程式，如果之前未安裝，我們應該安裝 Node.js 和 npm。然後，執行以下命令以構建新的 React 應用程式 -

npx create-react-app my-react-app
cd my-react-app
npm start

示例 - 標題指標事件

現在讓我們看看如何在 React 應用程式中使用 PointerEvent 屬性。當在 <div> 元素上發生指標事件時，我們將記錄以下資訊 -

import React from 'react';

function App() {
   return (
      <>
         <h1
            onPointerEnter={e => console.log('onPointerEnter')}
            onPointerMove={e => console.log('onPointerMove')}
            onPointerDown={e => console.log('onPointerDown')}
            onPointerUp={e => console.log('onPointerUp')}
            onPointerLeave={e => console.log('onPointerLeave')}      
         >
            Trigger pointer events over this div
         </h1>
      </>
   );
}

export default App;

輸出

示例 - 更改背景顏色

在這個示例中，我們將有一個 React 應用程式，當用戶將滑鼠懸停在其上時，它會更改 div 元素的背景顏色。因此，我們將使用 useState hook 建立一個狀態變數 (bgColor) 及其更新器函式 (setBgColor)。定義了兩個函式，handlePointerEnter 和 handlePointerLeave，用於在使用者將滑鼠懸停在 div 上或離開 div 時更新背景顏色。內聯樣式根據當前的 bgColor 狀態動態調整 div 的背景顏色。div 內部的文字告訴使用者將滑鼠懸停在其上以更改顏色。因此，此應用程式的程式碼如下 -

import React, { useState } from 'react';

function App() {
   const [bgColor, setBgColor] = useState('#3498db');   
   return (
      <div
         onPointerEnter={() => setBgColor('#e67e22')}
         onPointerLeave={() => setBgColor('#3498db')}
         style={{ border: '2px solid #3498db', padding: '20px', margin: '10px', backgroundColor: bgColor }}
      >
         Hover to change color!
      </div>
   );
}

export default App;

輸出

此應用程式提供了一個基本示例，說明如何使用 React 狀態和指標事件在 Web 應用程式中建立互動式樣式更改。

示例 - 雙擊更改大小

現在，我們將建立一個簡單的 React 應用程式，允許使用者透過雙擊 div 元素來更改其大小。useState hook 用於建立狀態變數及其更新器函式。初始大小設定為 100 畫素。當呼叫 handleDoubleClick 函式時，它會在 100 和 150 畫素之間切換大小。div 元素使用 onDoubleClick 事件偵聽雙擊，從而觸發 handleDoubleClick 函式。

import React, { useState } from 'react';

function App() {
   const [size, setSize] = useState(100);   
   const handleDoubleClick = () => {
      setSize((prevSize) => (prevSize === 100 ? 150 : 100));
   };   
   return (
      <div
         onDoubleClick={handleDoubleClick}
         style={{
            border: '2px solid #2ecc71',
            padding: '20px',
            margin: '10px',
            width: `${size}px`,
            height: `${size}px`,
         }}
      >
         Double click to change size!
      </div>
   );
}

export default App;

輸出

此應用程式提供了一個基本示例，說明如何使用 React 狀態和事件處理在 Web 應用程式中建立互動式行為。

總結

在本教程中，我們在基本 React 應用程式的上下文中介紹了 PointerEvent。我們已經瞭解了重要的屬性以及如何處理這些事件的示例。瞭解這些事件對於開發動態和響應式的 Web 應用程式至關重要。因此，我們可以在 React 應用程式中試驗這些想法，以更好地瞭解它們的功能。