我正在尝试在我创建的通用输入组件上使用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))}
/>
)
}
onInput
并没有被广泛使用,而且在 React 中显然与onChange
相同(参见 https://dev59.com/oVoT5IYBdhLWcg3wtBRz)。传递给onChange
处理程序的参数的target
属性具有您可以使用的value
。 - colinDonInput
,因为它支持拖放、剪切和粘贴、数字字段上的上/下箭头。无论如何,你不能在 TypeScript 中使用onInput
来获取值吗? - ÁlvaroonInput={(event: React.ChangeEvent<HTMLInputElement>) => // 在此处使用 event.target.value}
- colinD