迹忆客 专注技术分享

要在 React 中按下 Enter 键时获取输入的值：

1. 在输入字段上设置 onKeyDown 属性。
2. 当用户按下一个键时，检查该键是否为 Enter。
3. 从状态变量访问输入字段的值。

import {useState} from 'react';

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

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

    if (event.key === 'Enter') {
      event.preventDefault();

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

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

      console.log('User pressed Enter ✅');
    }
  };

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

export default App;

我们使用 useState 钩子来存储输入字段的值。

当 onKeyDown 属性被添加到输入字段时，我们只监听用户在输入字段获得焦点时按下的键。

每当用户按下一个键时，handleKeyDown 函数就会运行。 我们使用事件对象的 key 属性来检查用户是否按下了 Enter。

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

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

const App = () => {
  const handleKeyDown = event => {
    if (event.key === 'Enter') {
      event.preventDefault();

      console.log('User pressed Enter ✅');

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

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

export default App;

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

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

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

当我们需要在用户完成输入并且不想使用带有 onSubmit 事件处理程序的表单时运行一些逻辑时，这种方法很有用。