React事件的正确类型是什么。最初,为了简单起见,我只用了any
。现在,我想把事情清理一下,完全避免使用any
。
所以在这样一个简单的表格中:
export interface LoginProps {
login: {
[k: string]: string | Function
uname: string
passw: string
logIn: Function
}
}
@inject('login') @observer
export class Login extends Component<LoginProps, {}> {
update = (e: React.SyntheticEvent<EventTarget>): void => {
this.props.login[e.target.name] = e.target.value
}
submit = (e: any): void => {
this.props.login.logIn()
e.preventDefault()
}
render() {
const { uname, passw } = this.props.login
return (
<div id='login' >
<form>
<input
placeholder='Username'
type="text"
name='uname'
value={uname}
onChange={this.update}
/>
<input
placeholder='Password'
type="password"
name='passw'
value={passw}
onChange={this.update}
/>
<button type="submit" onClick={this.submit} >
Submit
</button>
</form>
</div>
)
}
}
我在这里用什么类型作为事件类型?
React.SyntheticEvent<EventTarget>
似乎不起作用,因为我得到一个错误,name
和value
在target
上不存在。
如果能对所有的事件有更普遍的回答,我将非常感激。
谢谢
SyntheticEvent]1接口是通用的:
interface SyntheticEvent<T> {
...
currentTarget: EventTarget & T;
...
}
而currentTarget
是通用约束和EventTarget
的交集。
另外,由于你的事件是由输入元素引起的,你应该使用FormEvent
(在定义文件中,反应文档)。
应该是:
update = (e: React.FormEvent<HTMLInputElement>): void => {
this.props.login[e.currentTarget.name] = e.currentTarget.value
}
问题不在于事件类型,而在于 typescript 中的 EventTarget 接口只有 3 个方法:
interface EventTarget {
addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
dispatchEvent(evt: Event): boolean;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
}
interface SyntheticEvent {
bubbles: boolean;
cancelable: boolean;
currentTarget: EventTarget;
defaultPrevented: boolean;
eventPhase: number;
isTrusted: boolean;
nativeEvent: Event;
preventDefault(): void;
stopPropagation(): void;
target: EventTarget;
timeStamp: Date;
type: string;
}
所以name
和value
在EventTarget上不存在是正确的。你需要做的是将目标转换为具有你需要的属性的特定元素类型。在这种情况下,它将是HTMLInputElement
。
update = (e: React.SyntheticEvent): void => {
let target = e.target as HTMLInputElement;
this.props.login[target.name] = target.value;
}
同样,对于事件,你也可以用下面的方式来代替React.SyntheticEvent的类型:Event
, MouseEvent
, KeyboardEvent
...等等,取决于处理程序的使用情况。
查看所有这些类型定义的最好方法是查看 typescript & 的 .d.ts 文件;react.SyntheticEvent 文件。
也可以查看下面的链接以获得更多的解释: https://stackoverflow.com/questions/28900077/why-is-event-target-not-element-in-typescript