React TypeScript中onClick事件编译正常但点击处理函数不执行如何解决

问题根因 #

你的handleClick采用了嵌套返回函数的高阶函数写法，直接绑定给onClick时，点击触发只会执行外层无参函数，返回的携带事件参数的实际处理逻辑函数不会被调用，因此看不到执行效果。TypeScript编译无报错是因为外层函数本身符合onClick接收函数类型的校验规则，不会触发类型报错。

修复方案 #

方案1：去掉外层多余的函数包装（推荐） #

直接将处理逻辑写在第一层函数内，无需嵌套，这是React事件绑定最常用的写法：

const handleClick = (e: React.MouseEvent<HTMLElement>) => {
  console.log(e);
  const type: string = e.currentTarget.title;
  setCount((prevcount) => (type === 'decrement' ? prevcount - 1 : prevcount + 1));
};

方案2：绑定时执行外层函数获取实际处理逻辑 #

如果你需要额外传递自定义参数，可以保留高阶函数写法，绑定事件时加括号执行外层函数，拿到实际的处理函数：

<button title='decrement' onClick={handleClick()}>
  -
</button>
<button title='increment' onClick={handleClick()}>
  +
</button>

需要自定义传参时的写法示例：

// 高阶函数接收自定义参数
const handleClick = (customParam: string) => (e: React.MouseEvent<HTMLElement>) => {
  console.log(customParam, e);
}
// 绑定时传入自定义参数执行外层函数
<button onClick={handleClick('test')}>按钮</button>

其他潜在问题修复 #

你代码中首行的React导入大小写错误，React首字母必须大写，否则JSX编译会报错，正确写法为：
import React, { useState } from 'react';

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