React+Typescript计算器onKeyPress事件类型不匹配报错如何解决

错误原因 #

你定义的keyPressEvent函数第一个参数使用了原生DOM的KeyboardEvent类型，但React的onKeyPress事件返回的是React封装的合成键盘事件，二者类型不匹配触发TS报错。

解决方案 #

方案1：修改事件参数类型（最推荐） #

直接将函数参数的类型替换为React提供的合成事件类型即可：

// 从react包导入对应类型
import type { KeyboardEvent } from 'react';

const keyPressEvent = (event: KeyboardEvent<HTMLButtonElement>, digit: number) => {
    if (Number.isFinite(+event.key) && +event.key === digit) {
      updateCalc(event.key.toString());
    } else {
      return;
    }
};

方案2：使用原生事件对象 #

如果你确实需要访问原生KeyboardEvent的属性，可以从合成事件的nativeEvent字段获取原生事件对象：

const keyPressEvent = (event: React.KeyboardEvent<HTMLButtonElement>, digit: number) => {
    const nativeEvent = event.nativeEvent; // 拿到原生KeyboardEvent对象
    // 后续逻辑基于nativeEvent操作即可
};

额外优化建议 #

你当前的实现只能在对应按钮处于聚焦状态时，按下键盘才会触发回调，无法实现全局键盘响应。如果需要任意页面状态下都能响应键盘输入，建议添加全局键盘监听：

import { useEffect } from 'react';

// 在组件内部添加副作用监听全局按键
useEffect(() => {
  const handleGlobalKeyDown = (e: KeyboardEvent) => {
    // 匹配数字按键
    if (/^\d$/.test(e.key)) {
      updateCalc(e.key);
    }
    // 可扩展匹配运算符、退格、回车等于等其他按键逻辑
  };

  window.addEventListener('keydown', handleGlobalKeyDown);
  // 组件卸载时移除监听，避免内存泄漏
  return () => window.removeEventListener('keydown', handleGlobalKeyDown);
}, [updateCalc]);

添加上述逻辑后，不需要再给每个按钮单独绑定onKeyPress事件即可实现全局键盘响应。

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