React中Input组件onChange双类型参数的定义及报错解决

你的Input组件定义的onChange回调接受两种事件类型（ChangeEvent<HTMLInputElement> 和 SeperationChangeEvent），但你传入的handleChange只处理其中一种，TypeScript会判定这个回调无法应对组件可能抛出的另一种事件，因此触发报错。以下是几种可行的解决方式：

方法一：让回调兼容两种事件类型 #

修改handleChange的参数类型为联合类型，必要时用类型守卫区分不同事件的处理逻辑：

const Foo = () => {
  const handleChange = (e: ChangeEvent<HTMLInputElement> | SeperationChangeEvent) => {
    // 用类型守卫区分两种事件
    if ('target' in e) {
      // 处理 HTMLInputElement 类型的事件
      console.log(e.target.value);
    } else {
      // 处理 SeperationChangeEvent 类型的事件
      console.log(e); // 替换为你的实际处理逻辑
    }
  }
  return <Input onChange={handleChange}/>
}

方法二：确认组件只会触发HTMLInputElement事件时，用类型断言 #

如果你能保证当前Input实例只会抛出ChangeEvent<HTMLInputElement>，可以用类型断言绕过类型检查：

const Foo = () => {
  const handleChange = (e : ChangeEvent<HTMLInputElement>) => {}
  return <Input onChange={handleChange as (e: ChangeEvent<HTMLInputElement> | SeperationChangeEvent) => void}/>
}

注意：这种方式要谨慎使用，若组件后续抛出SeperationChangeEvent，可能引发运行时错误。

方法三：改造Input组件的类型定义（若有权限） #

如果Input组件是你自己维护的，可通过泛型让使用者指定事件类型，提升灵活性：

// 改造Input组件的类型定义
type InputProps<T = ChangeEvent<HTMLInputElement>> = {
  onChange?: (e: T) => void;
  // 其他组件属性...
}

const Input = <T extends ChangeEvent<HTMLInputElement> | SeperationChangeEvent>(props: InputProps<T>) => {
  // 组件实现逻辑...
}

// 使用时指定事件类型
const Foo = () => {
  const handleChange = (e : ChangeEvent<HTMLInputElement>) => {}
  return <Input<ChangeEvent<HTMLInputElement>> onChange={handleChange}/>
}

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