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

发布时间：2020-12-15 20:46:05 所属栏目：百科来源：网络整理

导读：我在Typescript中构建类似 this React example的东西.目标是让父项具有状态,并创建几个无状态子组件,将其点击返回到父组件. 由于示例是在Javascript中,我不知道输入框事件和onChange处理程序的类型是什么……？我已经尝试了几个选项,如React.MouseEvent HTML

我在Typescript中构建类似 this React example的东西.目标是让父项具有状态,并创建几个无状态子组件,将其点击返回到父组件.

由于示例是在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'.

如有疑问,请使用位置上的箭头为您推断,例如

回答

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!