输入事件类型在TypeScript / React中的使用

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 事件时，它提示 属性'value'在类型'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))}
    />
  )
}

- Álvaro

---

我认为 onInput 并没有被广泛使用，而且在 React 中显然与 onChange 相同（参见 https://dev59.com/oVoT5IYBdhLWcg3wtBRz）。传递给 onChange 处理程序的参数的 target 属性具有您可以使用的 value。 - colinD

我被推荐使用 onInput，因为它支持拖放、剪切和粘贴、数字字段上的上/下箭头。无论如何，你不能在 TypeScript 中使用 onInput 来获取值吗？ - Álvaro

我认为显式地为处理程序的参数进行类型设置是可行的：onInput={(event: React.ChangeEvent<HTMLInputElement>) => // 在此处使用 event.target.value} - colinD

Answer 1

明确指定处理程序的参数会起作用：

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

- colinD

Answer 2

做这个：

onInput = (event: Event) => {
      const { value } = event.target as unknown as { value: number };
      setRate(value);
};
  
<Input onInput={onInput} />

而且刮水条痕迹将会消失。

- LEMUEL ADANE