在 React 中实现键盘事件
介绍
单击鼠标按钮、滚动、按下键盘或拖动组件等事件（仅举几例）可帮助开发人员捕获用户的特定操作并显示反馈或根据用户的操作采取行动。在本指南中，您将只关注键盘事件以及如何在 React 中处理它们。
JavaScript 中的事件
在 JavaScript 中，事件只是指示用户执行了特定操作。您可以监听keydown和keyup事件，它们指示按下或释放键盘按键的时间。
以下是使用 JavaScript 实现键盘事件的典型代码块示例。以下代码块记录一条语句，显示用户按下的特定键。
document.addEventListener('keydown', function(event){
console.log(`Key: ${event.key} with keycode ${event.keyCode} has been pressed`);
)
请注意，每个键在传递给回调函数的KeyboardEvent中都有一个唯一标识符。当按下某个键时，上面的代码块会在控制台中显示以下内容。
# Key: Alt has been pressed
# Key: ArrowDown has been pressed
React 中的事件
React 中处理事件与 HTML 中的事件略有不同。例如，HTML 中的点击处理程序将按如下方式完成：
<button onclick="launchApp()">
Click Me
</button>
在 React 中可以按如下所示进行操作：
<button onClick={launchApp}>
Click Me
</button>
这里的主要区别是什么？?
- React 中的事件以 camelCase 命名。
- 在 React 中，您不需要传递函数的字符串表示形式，而是将函数本身作为 JSX 放在花括号内的处理程序传递。
React 中的键盘事件
到目前为止，您对 React 中的事件有了一般的了解，现在您可以在 React 中实现键盘事件了。如前所述，有两个可以使用的键盘事件，即 keyup和keydown事件。
现在，您将构建一个简单的测验应用程序，根据是或否的答案来标记用户。
首先，设置 create-react-app 或访问https://react.new以通过 codesandbox 获取完全配置的 React 环境。
import React from 'react';
function Quiz(){
handleAnswerChange(event){
if(event.key === 'y'){
alert('The sky is your starting point!')
}
else if (event.key === 'n') {
alert('The sky is your limit?')
}
}
return (
<div>
<p> Are You Smart?</p>
<input type="text" value={answer} onKeyPress={handleAnswerChange}/>
<small> Press Y for Yes or N for No</small>
</div>
)
}
上述代码块实现了一个名为handleAnswerChange的简单函数，该函数检查按下的键是y（表示是）还是n（表示否）。值y或n是从输入元素上的按键事件侦听器获取的。
结论
呼！本指南就到此为止。您已经比较和对比了 React 和 HTML 中的事件，并了解了如何在 React 中实现键盘事件。要了解更多信息，请阅读有关键盘事件和在 React 中处理事件的官方文档。
您也可以通过 Twitter 与我们联系：@DesmondNyamador
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
扫一扫，分享到微信
