為什么 React.js 不為 Escape 鍵觸發 onKey* 事件處理程序？

Question

顯然，如果按下的鍵是Escape並且焦點位於輸入元素上，React 不會觸發 onKey* 事件處理程序（例如onKeyDown和onKeyPress ）。 換句話說，當焦點位於此組件中的輸入元素上時，當我按下 Escape 鍵時，控制台上不會打印任何內容：

const Input = () => {
  return (
    <input
      type="text"
      value={...}
      onChange={...}
      onKeyDownCapture={(e) => {
        if (e.key === "Escape") {
          console.log("onKeyDownCapture: ", e);
        }
      }}
      onKeyDown={(e) => {
        if (e.key === "Escape") {
          console.log("onKeyDownCapture: ", e);
        }
      }}
      onKeyPress={(e) => {
        if (e.key === "Escape") {
          console.log("onKeyDownCapture: ", e);
        }
      }}
      onKeyUp={(e) => {
        if (e.key === "Escape") {
          console.log("onKeyDownCapture: ", e);
        }
      }}
    />
  );
};

這是一個您自己嘗試的代碼框。

這是為什么？

Answer 1

React 的合成事件支持的KeyboardEvent類型的名稱是：

 onKeyDown onKeyPress onKeyUp

我沒有確定您在訪問 CodeSandbox 鏈接時描述的問題，但這里有一個示例，它演示了一個記錄事件type和綁定到每個事件的key的單個偵聽器，以便您進行試驗/探索和重現成功在您的代碼中：

 <div id="root"></div><script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone@7.18.11/babel.min.js"></script> <script type="text/babel" data-type="module" data-presets="env,react"> const logKeyboardEventMeta = (ev) => console.log(ev.type, JSON.stringify(ev.key)); function Input () { return ( <input type="text" onKeyDown={logKeyboardEventMeta} onKeyPress={logKeyboardEventMeta} onKeyUp={logKeyboardEventMeta} /> ); } const reactRoot = ReactDOM.createRoot(document.getElementById('root')); reactRoot.render( <React.StrictMode> <Input /> </React.StrictMode> ); </script>