迹忆客 专注技术分享

使用 React.KeyboardEvent<HTMLElement> 类型在 React 中键入 onKeyUp 事件。 KeyboardEvent 接口用于 onKeyUp 事件。 我们可以通过 event.key 访问用户按下的键的值。

import React from 'react';

const App = () => {
  // ✅ React.KeyboardEvent<HTMLElement> 类型事件
  const handleKeyUp = (event: React.KeyboardEvent<HTMLElement>) => {
    console.log(event.key);
    // console.log(event.code);
  };

  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        defaultValue=""
        onKeyUp={handleKeyUp}
      />
    </div>
  );
};

export default App;

上述代码效果如下

但是，我们在输入事件时可以更具体。

找出事件类型的最简单方法是内联编写事件处理程序并将鼠标悬停在函数中的事件参数上。

const App = () => {
  // 👇️ onKeyUp 事件是用鼠标将鼠标悬停在 `event` 参数上的
  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        defaultValue=""
        onKeyUp={event => console.log(event)}
      />
    </div>
  );
};

export default App;

当事件被内联写入时，我可以将鼠标悬停在事件参数上，它会告诉我事件的类型是什么。

TypeScript 能够在内联编写事件时推断事件的类型。

这非常有用，因为它适用于所有事件。 只需编写内联事件处理程序的“模拟”实现并将鼠标悬停在事件参数上即可获取其类型。

一旦我们知道事件的类型是什么，就可以提取我们的处理函数并正确键入它。

现在我们知道示例中 onKeyUp 事件的正确类型是 React.KeyboardEvent<HTMLInputElement>，我们可以提取我们的处理函数。

import React from 'react';

const App = () => {
  const handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {
    console.log(event.key);
    // console.log(event.code);
  };

  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        defaultValue=""
        onKeyUp={handleKeyUp}
      />
    </div>
  );
};

export default App;

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

我们传递给 KeyboardEvent 泛型的类型是 HTMLInputElement，因为我们将 onKeyUp 事件附加到输入元素，但是我们可以将事件附加到不同的元素。

这些类型一致地命名为 HTML***Element。 一旦你开始输入 HTML..，你的 IDE 应该能够帮助你自动完成。

一些常用的类型有：HTMLInputElement、HTMLButtonElement、HTMLAnchorElement、HTMLImageElement、HTMLTextAreaElement、HTMLSelectElement等。

注意 ，我们可以使用这种方法来获取所有事件的类型，而不仅仅是 onKeyUp 事件。

只要我们内联编写事件处理函数并将鼠标悬停在事件参数上，TypeScript 就能够推断出事件的类型。