React TypeScript子组件传Change事件值至父组件报错排查

错误根源拆解 #

你的问题核心是函数传递时的类型不匹配：

• 父组件的handleChange是柯里化函数：先接收name参数，返回一个接收event的函数，完整类型为(name: string) => (event: FormEvent<HTMLInputElement | HTMLSelectElement>) => void
• 你传递给子组件时，调用了handleChange('category')，此时实际传递的是柯里化后的最终函数，类型是(event: FormEvent<...>) => void
• 但子组件的FuncProps把handleChange定义成了需要接收name的柯里化函数类型，两者类型完全不匹配，因此触发类型错误。

两种针对性解决方案 #

方案1：子组件自主传入name参数

如果子组件需要根据不同场景传入不同name，父组件直接传递完整的柯里化函数，子组件调用时传入目标name：

// 父组件传递逻辑
<ChildComponent handleChange={handleChange} />

// 子组件内调用示例（select元素）
<select onChange={(e) => props.handleChange('category')(e)}>
  {/* 选项内容 */}
</select>

// 子组件Props类型保持原有定义
interface FuncProps {
  handleChange: (name: string) => (event: FormEvent<HTMLInputElement | HTMLSelectElement>) => void
}

方案2：父组件提前绑定name参数

如果父组件已经确定要传递的是category这个固定name，无需子组件再指定，修改子组件的Props类型，让它接收已绑定好name的最终函数：

// 父组件传递逻辑（保持现有写法）
<ChildComponent handleChange={handleChange('category')} />

// 子组件Props类型修改
interface FuncProps {
  handleChange: (event: FormEvent<HTMLInputElement | HTMLSelectElement>) => void
}

// 子组件内直接调用
<select onChange={props.handleChange}>
  {/* 选项内容 */}
</select>

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