首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >onInput事件类型在TypeScript / React上

onInput事件类型在TypeScript / React上
EN

Stack Overflow用户
提问于 2022-02-01 10:11:05
回答 1查看 2.5K关注 0票数 2

我试图在我创建的通用输入组件上使用onInput,每次我添加DOM事件时,我都会与TypeScript进行一些斗争。

这是我的组件,Input.tsx:

代码语言:javascript
复制
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'

代码语言:javascript
复制
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))}
    />
  )
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-02-01 10:40:29

显式地键入处理程序的参数是有效的:

代码语言:javascript
复制
<Input
  onInput={(event: React.ChangeEvent<HTMLInputElement>) => setRate(event.target.value) }
/>
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/70938743

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档