Typescript:反应事件类型

React事件的正确类型是什么。最初,为了简单起见,我只使用了any。现在,我正在努力清理,完全避免使用any

以这样一种简单的形式:

导出接口登录操作{
登录:{
[k:string]:字符串|函数
uname:string
passw:string
登录:函数
}
}
@注入(’login’)@observer
导出类登录扩展组件<登录操作,{}>{
更新=(e:React.SyntheticEvent<EventTarget>):无效=&gt{
this.props.login[e.target.name]=e.target.value
}
提交=(e:任何):无效=&gt{
this.props.login.login()
e、 预防默认值()
}
render(){
const{uname,passw}=this.props.login
返回(
<div id=’login’>
<表格>
<输入
占位符=’Username’
type=“text”
name=’uname’
值={uname}
onChange={this.update}
/&燃气轮机;
<输入
占位符=“密码”
type=“密码”
name=’passw’
值={passw}
onChange={this.update}
/&燃气轮机;
<button type=“submit”onClick={this.submit}>
提交
</button>
</form>
</div>
)
}
}

我在这里使用什么类型作为事件类型

反应事件<EventTarget&gt似乎不起作用,因为我收到一个错误,namevaluetarget上不存在

对于所有事件的更普遍的答案,我们将不胜感激

谢谢

事件接口是通用的:

接口事件<T>{
...
currentTarget:EventTarget&T;
...
}

(从技术上讲,currentTarget属性位于父事件类型上。)

currentTarget是泛型约束和EventTarget的交集
此外,由于事件是由输入元素引起的,因此应使用ChangeEvent(在定义文件中,使用react docs)

应该是:

update=(e:React.ChangeEvent<HTMLInputElement>):void=>{
this.props.login[e.currentTarget.name]=e.currentTarget.value
}

(注意:此答案最初建议使用React.FormEvent。评论中的讨论与此建议相关,但应如上所示使用React.ChangeEvent。)

发表评论