我试图在我创建的通用输入组件上使用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))}
/>
)
}发布于 2022-02-01 10:40:29
显式地键入处理程序的参数是有效的:
<Input
onInput={(event: React.ChangeEvent<HTMLInputElement>) => setRate(event.target.value) }
/>https://stackoverflow.com/questions/70938743
复制相似问题