typescript - 用于 Grommet 的 RangeInput 组件的 onChange 事件的正确类型定义是什么？

Question

我收到了onChangeGrommetRangeInput组件的打字稿错误。

<RangeInput
 onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
  setAge(event.target.value)
 }
/>

错误：

Type '(event: React.ChangeEvent<HTMLInputElement>) => void' is not assignable to type '((event: ChangeEvent<Element>) => void) & ((event: ChangeEvent<HTMLInputElement>) => void)'.
  Type '(event: React.ChangeEvent<HTMLInputElement>) => void' is not assignable to type '(event: ChangeEvent<Element>) => void'.
    Types of parameters 'event' and 'event' are incompatible.
      Type 'ChangeEvent<Element>' is not assignable to type 'ChangeEvent<HTMLInputElement>'.
        Type 'Element' is missing the following properties from type 'HTMLInputElement': accept, align, alt, autocomplete, and 159 more.ts(2322)
index.d.ts(8, 3): The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & RangeInputProps & ClassAttributes<HTMLInputElement> & InputHTMLAttributes<HTMLInputElement> & { ...; }'

用于 onChange 的正确类型是什么？反应变化事件？

Answer 1

这是由 的类型引起的grommet，请参阅https://github.com/grommet/grommet/blob/2a38c185e1/src/js/components/RangeInput/index.d.ts#L8。

onChange省略了泛型参数的类型T，这意味着 typeofonChange是(event: React.ChangeEvent<Element>) => void。

解决此问题的一种简单方法是as在您的项目中使用：

<RangeInput
 onChange={(event: React.ChangeEvent) =>
  setAge((event.target as HTMLInputElement).value)
 }
/>

更好的方法是创建一个 prgrommet来解决这个问题，只需要删除onChange声明行。