React TypeScript中input的keyup事件如何正确声明类型

报错原因 #

你使用了浏览器原生的KeyboardEvent类型，而React内部对事件做了封装，所有事件都是合成事件类型，和原生DOM事件的类型定义不匹配，且需要指定绑定事件的DOM元素泛型，才能和组件的事件处理器类型对齐。

正确代码实现 #

<input
  type="text"
  placeholder="Search for claim ID"
  onKeyUp={(e: React.KeyboardEvent<HTMLInputElement>) => {
    console.info(e.key);
  }}
/>

如果你的回调是直接内联写在组件属性上，也可以不手动声明事件类型，TS会自动根据onKeyUp的类型推断出参数e的正确类型，不会出现报错。

如果是单独抽离的事件处理函数，需要手动指定类型：

const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
  console.info(e.key);
}

<input
  type="text"
  placeholder="Search for claim ID"
  onKeyUp={handleKeyUp}
/>

通用事件类型规则 #

常用React合成事件类型对应关系：

• 键盘事件（onKeyUp/onKeyDown/onKeyPress）：React.KeyboardEvent<T>
• 鼠标事件（onClick/onMouseMove/onMouseEnter等）：React.MouseEvent<T>
• 输入框变更事件（onChange）：React.ChangeEvent<T>
• 焦点事件（onFocus/onBlur）：React.FocusEvent<T>
• 表单提交事件（onSubmit）：React.FormEvent<T>

泛型T需要替换为实际绑定事件的DOM元素类型，比如HTMLInputElement、HTMLButtonElement、HTMLFormElement等。

内容的提问来源于stack exchange，提问作者Jamie Hutber