在 React 中处理 onKeyDown 事件

React 4月前 68

在 React 中处理 onKeyDown 事件：

在元素上设置 onKeyDown 道具。
使用事件对象的 key 属性来获取用户按下的键。
例如，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;