ReactJS - 鍵盤事件處理程式

---

---

在 Web 開發領域，建立動態且互動式的使用者介面非常重要。響應鍵盤事件是改善使用者體驗的一種方法。因此，在本教程中，我們將瞭解如何在 React 應用程式中處理鍵盤事件。

鍵盤事件處理程式函式

要對鍵盤事件（如按鍵）做出反應，我們可以在 React 中使用事件處理程式方法。這些事件處理程式函式將一個事件物件作為引數，該物件包含有關鍵盤事件的資訊。讓我們看看此事件物件的語法：

<input
   onKeyDown={e => console.log('on Key Down')}
   onKeyUp={e => console.log('on Key Up')}
/>

引數

e - 它是一個 React 事件物件。我們可以使用此事件物件以及下面提供的一些屬性。

KeyboardEvent 屬性

KeyboardEvent 處理程式的事件

因此，KeyboardEvent 型別中有一些可用的事件。

onKeyDown - 此事件表明已按下某個鍵。

onKeyUp - 此事件表明已釋放某個鍵。

示例

示例 - 記錄按下的鍵

在此應用程式中，我們將建立一個簡單的 React 應用程式，其中我們將有一個名為“使用者名稱”的標籤和一個輸入欄位以鍵入輸入文字。因此，當用戶在輸入欄位中輸入文字時，我們將在控制檯中看到常見的鍵盤事件。

import React from 'react';

export default function App () {
   return (
      <label>
         User Name:
         <input
            name="userName"
            onKeyDown={e => console.log('onKeyDown:', e.key, e.code)}
            onKeyUp={e => console.log('onKeyUp:', e.key, e.code)}
         />
      </label>
   );
}

輸出

在上面的示例程式碼中，我們建立了一個輸入欄位並向輸入欄位添加了事件處理程式。因此，當按下任何鍵（'onKeyDown'）時，我們記錄與該鍵相關的鍵和程式碼。就像這樣，當釋放鍵（'onKeyUp'）時，我們記錄鍵和程式碼。

示例 - 按鍵檢測器

此應用程式將檢測並顯示使用者按下的鍵。它將有一個名為 KeyPressDetector 的元件，該元件使用 useState hook 來跟蹤當前按下的鍵。然後，我們將使用 useEffect hook 來新增和刪除 'keydown' 事件的全域性事件監聽器。每當按下某個鍵時，都會呼叫 handleKeyPress 函式，使用按下的鍵更新狀態。

import React, { useState, useEffect } from 'react';

const KeyPressDetector = () => {
   const [pressedKey, setPressedKey] = useState(null);   
   const handleKeyPress = (event) => {
      setPressedKey(event.key);
   };
   
   useEffect(() => {
      window.addEventListener('keydown', handleKeyPress);      
      return () => {
         window.removeEventListener('keydown', handleKeyPress);
      };
   }, []);
   
   return (
      <div>
         <p>Press any key:</p>
         <p>Pressed Key: {pressedKey}</p>
      </div>
   );
};

export default KeyPressDetector;

輸出

因此，我們可以看到渲染的元件顯示一條訊息，提示使用者按下任意鍵並顯示當前按下的鍵。

示例 - 背景顏色更改器

在此應用程式中，我們將建立一個 BackgroundColorChanger 元件，當用戶按下“Enter”鍵時，該元件會更改 div 的背景顏色。它使用 useState hook 來管理背景顏色狀態，並使用 useEffect hook 來新增和刪除 'keydown' 事件監聽器。當按下“Enter”鍵時，handleKeyPress 函式會生成一個隨機顏色並更新背景顏色狀態。

import React, { useState, useEffect } from 'react';

const BackgroundColorChanger = () => {
   const [backgroundColor, setBackgroundColor] = useState('#ffffff');   
   const handleKeyPress = (event) => {
      if (event.key === 'Enter') {
         const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
         setBackgroundColor(randomColor);
      }
   };   
   useEffect(() => {
      window.addEventListener('keydown', handleKeyPress);      
      return () => {
         window.removeEventListener('keydown', handleKeyPress);
      };
   }, [backgroundColor]);   
   return (
      <div style={{ backgroundColor, padding: '20px' }}>
         <p>Press Enter to change background color</p>
      </div>
   );
};

export default BackgroundColorChanger;

輸出

在上面的應用程式中，渲染的元件顯示一條訊息，提示使用者按下“Enter”以觀察顏色變化。每次按下 Enter 鍵，顏色都會發生變化。

總結

在 React 中處理鍵盤事件可以增強我們 Web 應用程式的互動性和使用者體驗。透過使用這些事件處理程式函式和事件物件的屬性，我們可以響應按鍵並建立響應式介面。