React+TypeScript中onClick函数类型不匹配的修复及类型设置

错误原因 #

React的onClick事件回调默认会传入一个MouseEvent<HTMLButtonElement>类型的事件对象，但你的tes函数要求接收string类型参数，类型不匹配导致TypeScript报错。

修复方案 #

方案1：让函数适配onClick的事件参数

如果需要获取按钮自身的标识（比如id属性），直接修改tes函数接收事件对象，从事件中提取需要的字符串：

// 修正后的tes函数
const tes = (event: React.MouseEvent<HTMLButtonElement>) => {
  const id = event.currentTarget.id; // 从按钮元素获取id
  console.log(id);
};

// 使用方式不变
<button onClick={tes} type="button" id="btn-test">click</button>

方案2：用箭头函数包装，传递自定义字符串参数

如果要给tes传自定义的string值，用箭头函数包裹onClick回调，手动传入参数：

// 保留原tes函数
const tes = (id: string) => {
  console.log(id);
};

// 箭头函数包装，传递自定义id
<button onClick={() => tes("my-custom-id")} type="button">click</button>

// 如需同时获取事件对象和自定义参数
<button onClick={(e) => {
  e.stopPropagation(); // 处理事件逻辑
  tes("my-custom-id");
}} type="button">click</button>

方案3：函数重载兼容两种调用场景

如果tes既要能接收string参数，又要能直接作为onClick回调，用函数重载实现：

// 定义函数重载
function tes(id: string): void;
function tes(event: React.MouseEvent<HTMLButtonElement>): void;

// 函数实现
function tes(arg: string | React.MouseEvent<HTMLButtonElement>) {
  const id = typeof arg === 'string' ? arg : arg.currentTarget.id;
  console.log(id);
}

// 两种调用方式都支持
<button onClick={tes} type="button" id="btn-1">click</button>
<button onClick={() => tes("manual-id")} type="button">click</button>

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