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

Question

我收到 Grommet 的 RangeInput 组件的 onChange 的打字稿错误。

<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 的正确类型是什么？ React.ChangeEvent?

Answer 1

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

onChange的类型省略了泛型参数T，也就是说onChange的类型是(event: React.ChangeEvent<Element>) => void.

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

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

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

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

What is the right type definition to use for the onChange event for Grommet's RangeInput component?

typescript

grommet