迹忆客 专注技术分享

在 React 中处理 onKeyPress 事件：

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

import {useState} from 'react';

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

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

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

    // 👇️ 从状态访问输入值
    console.log(message);

    // 👇️ 从 event 对象访问输入值 console.log(event.target.value)
  };

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

export default App;

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

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

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

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

如果我们不想跟踪输入字段的状态，我们可以在事件对象的目标属性上获取其值。

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

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

    // 👇️ 获取 event 对象中的值
    console.log(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        onKeyPress={handleKeyPress}
      />
    </div>
  );
};

export default App;

我们没有存储输入字段的值，而是使用事件对象获取它。

事件的目标属性指的是输入元素。

我们可以通过访问此 MDN 页面查看用户可能按下的键。