我正在用 typewriter 写大约this React example个字.目标是让父组件具有状态,并创建几个无状态子组件,将其单击传递回父组件.

因为这个例子是用Javascript编写的,所以我不知道输入框事件和onChange处理程序的类型是什么...?我试过几个选项,比如React.MouseEvent<HTMLInputElement>个,但那只是猜测...

Parent component

render() {
  <div>
    <ImageRow key={el.url} onChange={this.onChange}/>
  </div>
 }
 // what should the type of e be?
 onChange(e:any){
 }

以及ImageRow组件

export interface ImageRowProps { 
  genre: Array<number>
  url: string
  onChange : any // what is the type of the callback function?
}

export class ImageRow extends React.Component<ImageRowProps> {
  render() {
    return <div className="imagerow">
        <input type="checkbox" key={index} onChange={this.props.onChange} defaultChecked={(num == 1)}/>
    </div>
}

EDIT

类似的问题只显示事件类型,而不是处理程序类型.当我更改事件类型时:

onChange(e: React.FormEvent<HTMLInputElement>){
    console.log(e.target.value)
}

我得到了这个错误:

Property 'value' does not exist on type 'EventTarget'.

推荐答案

当有疑问时,让它通过在位置上使用箭头来为您推断.

enter image description here

Answer

在你的情况下,eReact.ChangeEvent<HTMLInputElement>.

Typescript相关问答推荐

如何在类型脚本中使用条件陈述循环

物料UI图表仅在悬停后加载行

使用React处理Websocket数据

TypeScript类型不匹配:在返回类型中处理已经声明的Promise Wrapper

如何在处理数组时缩小几个派生类实例之间的类型范围?

Angular文件上传到Spring Boot失败,多部分边界拒绝

在HighChats列时间序列图中,十字准线未按预期工作

在另一个类型的函数中,编译器不会推断模板文字类型

使用动态输出类型和泛型可重用接口提取对象属性

TypeScrip中的类型安全包装类

声明文件中的类型继承

@TANSTACK/REACT-QUERY中发生Mutations 后的数据刷新问题

Typescript 中相同类型的不同结果

类型脚本-在调用期间解析函数参数类型

S,为什么我的T扩展未定义的条件在属性的上下文中不起作用?

如何通过属性名在两个泛型数组中找到匹配的对象?

有没有一种更好的方法来存储内存中的数据,而不是在类型脚本中使用数组和基于索引的函数?

基于属性值的条件类型

有没有一种方法可以提升对象的泛型级别,而对象的值是泛型函数?

如何在TypeScript中描述和实现包含特定属性的函数?