JIYIK CN >

The onKeyUp event is React.KeyboardEvent<HTMLElement>typed in React using the KeyboardEvent interface. We can event.keyaccess the value of the key pressed by the user through .

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;

The above code has the following effect:

However, we can be more specific when entering events.

The easiest way to find out the event type is to write the event handler inline and hover over the event arguments in the function.

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

export default App;

When the events are written inline, I can hover over the event parameters and it will tell me what the type of event is.

TypeScript is able to infer the types of events when writing them inline.

This is very useful because it works for all events. Just write a "mock" implementation of the event handler inline and hover over the event argument to get its type.

Once we know what the type of the event is, we can extract our handler function and type it correctly.

Now that we know onKeyUpthe correct type of event for our example React.KeyboardEvent<HTMLInputElement>, we can extract our handler function.

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;

KeyboardEventThe key property of the object returns the value of the key pressed by the user.

The type we pass to KeyboardEventthe generic is HTMLInputElementbecause we are attaching the onKeyUp event to the input element, but we could have attached the event to a different element.

The types are named consistently HTML***Element. HTML..Your IDE should be able to help you autocomplete once you start typing.

Some commonly used types are: HTMLInputElement, HTMLButtonElement, HTMLAnchorElement, HTMLImageElement, HTMLTextAreaElement, HTMLSelectElementetc.

注意, we can use this method to get the type of all events, not just onKeyUp events.

As long as we write the event handler inline and hover over the event arguments, TypeScript will be able to infer the type of the event.