在 React 中处理 onKeyDown 事件

在 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;

在 React 中处理 onKeyDown 事件

如果需要在 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 值之后,该元素在顺序键盘导航中是可聚焦的。

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

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