如何正确实现高阶函数闭包及标注React事件TS类型

你的代码不生效的核心原因是事件绑定逻辑有误：onChange接收的回调要求是「事件触发时直接执行的函数」，但你写的() => handleChangeClosure(user.userId, "Controller")只在事件触发时执行了外层闭包函数，拿到返回的内层处理函数后既没有传参也没有调用，内层逻辑自然不会运行。

两种正确的修复写法选一种即可：

• 写法1：渲染时直接执行外层函数，把返回的内层事件处理函数传给onChange（更简洁，性能更好）

<input 
  type="checkbox" 
  onChange={handleChangeClosure(user.userId, "Controller")}
/>

这种写法下，组件渲染时就会执行handleChangeClosure，把userId、role封存在闭包作用域中，返回的内层函数会被React绑定为change事件回调，事件触发时会自动接收到事件对象，完全符合需求。

• 写法2：在内联箭头函数中手动传入事件对象，调用返回的内层函数

<input 
  type="checkbox" 
  onChange={(e) => handleChangeClosure(user.userId, "Controller")(e)}
/>

复选框的change事件属于React合成事件，正确类型为ChangeEvent<HTMLInputElement>，需要从react包导入该类型，完整写法如下：

import type { ChangeEvent } from 'react';

const handleChangeClosure = (userId: string, role: string) => (event: ChangeEvent<HTMLInputElement>) => {
  // 此时TS会正确推断event.target存在checked属性，无类型报错
  const { checked } = event.target;
  dispatch(addOrDeleteRoleAction(userId, role, checked, dispatch));
};

注意：不要使用原生DOM的Event类型标注，React的合成事件体系和原生事件类型不兼容，会导致属性推断失败。

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