TypeScript / React 上的 onInput 事件类型

Question

我试图onInput在我创建的通用输入组件上使用，每次添加 DOM 事件时，我都会与 TypeScript 发生一些冲突。

这是我的组件，Input.tsx：

import React, { ChangeEvent, FormEvent } from 'react'

import { InputStyled } from './Input-style'

type InputProps = {
  name: string
  value: string | number
  type?: string
  placeholder?: string
  onInput?: (e: FormEvent<HTMLInputElement>) => void
  onChange?: (e: ChangeEvent<HTMLInputElement>) => void
}

export const Input = (props: InputProps) => (
  <InputStyled
    type={props.type ? props.type : 'text'}
    name={props.name}
    id={props.name}
    placeholder={props.placeholder}
    value={props.value}
    onInput={props.onInput}
    onChange={props.onChange}
   />
)

我遇到的问题是，当使用该onInput事件时，它说Property 'value' does not exist on type 'EventTarget'

import React from 'react'
import { Input } from '@components'

export const Main = () => {
  const [rate, setRate] = useState<number>(0)

  return (
    <Input
      type='number'
      name='Rate'
      value={rate}
      placeholder='Decimal number'
      onInput={e => setRate(Number(e.target.value))}
    />
  )
}

Answer 1

显式输入处理程序的参数是有效的：

<Input
  onInput={(event: React.ChangeEvent<HTMLInputElement>) => setRate(event.target.value) }
/>