迹忆客 专注技术分享

在 React.js 中检测用户何时按下退格键：

1. 将 onKeyDown 道具添加到输入元素。
2. 每次用户在输入字段中按下一个键时，检查按下的键是否为退格键。
3. 调用函数或运行某些逻辑（如果是）。

import {useState} from 'react';

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

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

    // console.log(message);

    if (event.key === 'Backspace') {
      // 👇️ your logic here
      console.log('Backspace key pressed ✅');
    }
  };

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

export default App;

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

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

只要用户按下键盘上的键，就会触发 keydown 事件。

每次触发事件时，我们都会检查按下的键是否为退格键，如果是则运行一些逻辑。

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

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