获取 onKeyDown 事件以在 React 中使用 Div

现代 Web 应用程序必须在每次发生特定浏览器事件时侦听事件并触发函数以响应用户操作。这些函数称为事件处理程序，它们对于在 React 中构建动态应用程序至关重要。

onKeyDown 是 React 中最有用的事件之一。它允许开发人员跟踪文本输入并动态验证其值。

今天的文章将讨论如何在 React 中处理 onKeyDown 事件。

React 中的 onKeyDown 事件

onKeyDown 是处理文本输入的最流行的事件之一。每次用户在选择文本输入字段时按下任意键时都会触发此事件。

onKeyDown 和类似的 onKeyPress 事件之间的主要区别在于触发它们的原因。onKeyDown 事件不区分用于键入值的键（数字、A-z 字母）和其他键（例如 shift）。

onKeyPress 仅对产生字母、数字或符号的事件触发。onKeyDown 被认为是更现代和更广泛支持的事件。

它也比 onKeyPress 事件更一致，无论你运行的是哪个版本的 React。

onKeyDown 用于 React 中的 div

在正常情况下，开发人员只在文本输入上监听 onKeyDown 事件。

<div> 元素通常是包装器，不接受任何输入。出于这个原因，<div> 元素的默认行为会阻止 onKeyDown 工作。

不过，无需担心，因为一个简单的修复允许我们将 onKeyDown 用于 <div> 元素。如果你想监听 <div> 上的 onKeyDown 事件，你必须设置 tabIndex 属性。

该属性指示 <div> 元素是否可以被聚焦。它还使用 Tab 键处理键盘导航中元素的顺序。

下面是一个可以监听 onKeyDown 事件的 <div> 元素示例：

class App extends Component {
  render() {
    return <div tabIndex="0" onKeyDown={() => console.log('key pressed')}>
          Some div
          </div>;
  }
}

你可以在 playcode 上自己试用代码。