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 应用程序的交互性和用户体验。通过使用这些事件处理程序函数和事件对象的属性，我们可以响应按键并创建响应式界面。