ReactJS - KeyboardEvent 处理器

---

---

在 Web 开发领域，创建动态和交互式用户界面非常重要。响应键盘事件是改善用户体验的一个过程。因此，在本教程中，我们将了解如何在 React 应用程序中处理键盘事件。

KeyboardEvent 处理程序函数

为了对按键等键盘事件做出反应，我们可以在 React 中使用事件处理程序方法。这些事件处理函数将事件对象作为参数，其中包含有关键盘事件的信息。让我们看一下这个事件对象的语法 -

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

参数

• e − 它是一个 React 事件对象。我们可以将此事件对象与下面提供的一些属性一起使用。

KeyboardEvent 属性

属性	描述
altKey	指示是否按下“Alt”键。
charCode	表示键的 Unicode 字符代码。
code	键盘上的实际键（例如，“KeyA”表示“A”键）。
ctrlKey	指示是否按下“Ctrl”键。
key	键上的标签（例如，“A”表示“A”键）。
keyCode	键代码由此值表示。
metaKey	表示存在“Meta”键（在 Mac 上为“Command”键）。
location	指定键在键盘上的位置。
repeat	指示键事件是否是键被按住的结果。
shiftKey	指示是否按下“Shift”键。
which	它返回一个数字，用于显示依赖于系统和实现的数字代码。这就像 keyCode 一样。
data	包含有关事件的其他信息。
view	提供有关生成事件的视图（窗口）的信息。

KeyboardEvent 处理程序的事件

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

• onKeyDown − 此事件显示已按下某个键。
• onKeyUp − 此事件显示已释放密钥。

例子

示例 - 记录按下的键

在这个应用程序中，我们将创建一个简单的 React 应用程序，其中我们将有一个名为 User Name 的标签和一个用于输入输入文本的输入字段。因此，当用户在输入字段中输入文本时，我们将能够在控制台中看到常见的键盘事件。

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 钩子来跟踪当前按下的键。然后，我们将使用 useEffect 钩子来添加和删除 '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 钩子来管理背景颜色状态，并使用 useEffect 钩子来添加和删除“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”以观察颜色变化。每次按下回车键，颜色都会发生变化。

总结

在 React 中处理键盘事件可以增强我们 Web 应用程序的交互性和用户体验。通过使用这些事件处理函数和事件对象的属性，我们可以响应按键并创建响应式接口。