React事件的正确类型是什么。最初,为了简单起见,我只使用了any。现在,我正在努力清理,完全避免使用any
以这样一种简单的形式:
导出接口登录操作{
登录:{
[k:string]:字符串|函数
uname:string
passw:string
登录:函数
}
}
@注入(’login’)@observer
导出类登录扩展组件<;登录操作,{}>;{
更新=(e:React.SyntheticEvent<;EventTarget>;):无效=>{
this.props.login[e.target.name]=e.target.value
}
提交=(e:任何):无效=>{
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>似乎不起作用,因为我收到一个错误,name和value在target上不存在
对于所有事件的更普遍的答案,我们将不胜感激
谢谢
事件接口是通用的:
接口事件<;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。)