Typescript error: Property 'code' does not exist on type 'KeyboardEvent<HTMLInputElement>'

Question

我有以下内容，目前正在产生类型错误。打字稿错误：属性 'code' 在类型 'KeyboardEvent'

上不存在

  const onKeyDownSim = (event: React.KeyboardEvent<HTMLInputElement>) => {
    const element = event.target as HTMLElement;
    if (event.code === 'Space') element.click();
  };

查看 React 中 KeyboardEvent 的定义，我明白为什么它会抱怨，因为 'code' 属性在这里不存在。然而，它确实有做同样事情的所有旧方法。已弃用 charCode 等。有什么解决方法吗？

interface KeyboardEvent<T = Element> extends SyntheticEvent<T, NativeKeyboardEvent> {
    altKey: boolean;
    /** @deprecated */
    charCode: number;
    ctrlKey: boolean;
    /**
     * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
     */
    getModifierState(key: string): boolean;
    /**
     * See the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). for possible values
     */
    key: string;
    /** @deprecated */
    keyCode: number;
    locale: string;
    location: number;
    metaKey: boolean;
    repeat: boolean;
    shiftKey: boolean;
    /** @deprecated */
    which: number;
}

Answer 1

您可以使用 key 属性来确定 what character 对应于按键事件：对于现代浏览器， space 的值将是 " " （"Spacebar" 对于年长者）。

请注意，根据 Changelog，code 属性已添加到 React v17 中的 React.KeyboardEvent，因此升级您的 React 版本应该允许您使用 code.

另请注意，您可能知道，code 和 key 并不完全相同：code 代表键盘上的物理键，而 key表示生成的字符。

Typescript error: Property 'code' does not exist on type 'KeyboardEvent<HTMLInputElement>'

Typescript error: Property 'code' does not exist on type 'KeyboardEvent<HTMLInputElement>'

event-handling

typescript

reactjs