React onKeyUp 与快速 Shift+按键的记录不一致

Question

我在 React 应用程序中遇到了一个与处理键盘事件相关的奇怪问题。具体来说，当快速按下 Shift 键和字母键时，

onKeyUp

事件处理程序会将

e.key

值记录为小写。但是，如果我按住 Shift 键，然后按字母键，它会正确记录大写字符。

相关代码如下：

import "./styles.css";

function Input({ keyupHandler }) {
  return <input onKeyUp={keyupHandler} placeholder="Type here" />;
}

export default function App() {
  function keyupHandler(e) {
    console.log(e.key); // Logs lowercase for quick Shift+Key presses
  }
  return (
    <div className="App">
      <Input keyupHandler={keyupHandler} />
    </div>
  );
}

我还创建了一个 CodeSandbox 示例来说明此行为。当快速点击 Shift 键然后点击字母键时，此问题尤其明显，导致 e.key 被记录为小写。如果在按字母键之前按住 Shift 键，则字符将以正确的大写形式记录。

我试图理解为什么这种时间差异会影响记录的按键大小写，以及如何确保 e.key 正确反映按键的大小写，即使对于快速 Shift+按键组合也是如此。

任何对此行为的见解或在 React 中有效处理它的建议将不胜感激。

Answer 1

释放

键时会触发

onKeyUp事件。您在事件处理程序中看到小写字母这一事实表明，在您释放该键时，您不再按下 Shift 键。

您看到输入中出现大写字母的事实是一个单独的行为。这基于按下的键（或键组合），可以由

onKeyDown

处理程序确定。因此，即使感觉就像您在按下下一个字符之前释放了 Shift 键，但 Shift 键的

onkeyup

事件并未在该角色的

onkeydown

事件之前触发，因此会导致大写字母。

要确认这一点，您可以将事件处理程序更改为

onKeyDown

并看到打印的大写字母始终与输入显示的内容匹配