迹忆客 专注技术分享

在 React 中处理 onKeyDown 事件：

1. 在元素上设置 onKeyDown 道具。
2. 使用事件对象的 key 属性来获取用户按下的键。
3. 例如，if(event.key === 'Enter') {}。

import {useState} from 'react';

const App = () => {
  const [message, setMessage] = useState('');

  const handleKeyDown = event => {
    console.log(event.key);

    if (event.key === 'Enter') {
      console.log('✅ Enter key pressed');
    }

    // 👇️ access input value from state
    // console.log(message);

    // 👇️ access input value from event object
    // console.log(event.target.value)
  };

  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        value={message}
        onKeyDown={handleKeyDown}
        onChange={event => setMessage(event.target.value)}
      />
    </div>
  );
};

export default App;

如果需要在 div 元素上设置 onKeyDown 事件监听器，请向下滚动到下一个代码片段。

我们在 input 元素上设置了 onKeyDown 属性，所以每次用户在输入有焦点时按下按钮，都会调用 handleKeyDown 函数。

事件对象的 key 属性返回用户按下的键的值。

每次用户按下一个键，handleKeyDown 函数都会运行，我们检查用户是否按下了 Enter。

条件 if (event.key === 'Enter') {} 涵盖所有操作系统 - Windows、Mac、Linux、Android 等。

如果需要在 div 元素上设置 onKeyDown 事件监听器，请在元素上设置 tabIndex 属性以使其具有焦点。

const App = () => {
  const handleKeyDown = event => {
    console.log('User pressed: ', event.key);
  };

  return (
    <div>
      <div tabIndex={0} onKeyDown={handleKeyDown}>
        <h2>Some content here</h2>
      </div>
    </div>
  );
};

export default App;

默认情况下，div 元素是不可聚焦的，因此为了处理 div 上的 onKeyDown 事件，我们必须在元素上设置 tabIndex 属性。

tabIndex 属性表明它的元素可以被聚焦以及它参与顺序键盘导航的位置（使用 Tab 键）。

当元素的 tabIndex 设置为 0 时，在任何正的 tabIndex 值之后，该元素在顺序键盘导航中是可聚焦的。

例如，如果页面上的其他元素的选项卡索引为 1、2、3 等，则选项卡索引为 0 的元素将在具有正选项卡索引的元素之后获得焦点。

我们还可以将元素的 tabIndex 设置为 -1，这意味着无法通过顺序键盘导航（使用 Tab 键）访问该元素，但可以使用 JavaScript 或通过鼠标单击来获得焦点。