reactjs - React 复选框事件和处理程序的 Typescript 类型？

Question

我正在构建类似 this React example 的东西在 typescript 中。目标是拥有一个具有状态的父级，它会创建几个无状态的子组件，这些子组件将它们的点击传递回父级。

由于示例是用 Javascript 编写的，所以我不知道输入框事件的类型和 onChange 处理程序是什么...？我尝试了几个选项，例如 React.MouseEvent<HTMLInputElement> ，但这只是猜测……

父组件创建 imageRows 并传递处理程序:

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>
}

编辑

类似的问题只显示了事件类型，没有显示处理程序类型。当我更改事件类型时:

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

我收到这个错误:

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

Answer 1

当有疑问时，让它通过使用位置中的箭头为您推断，例如

回答

在你的情况下 e是React.ChangeEvent<HTMLInputElement> .