React 事件的正确类型是什么。最初我只是any为了简单而使用。现在,我正在尝试清理东西并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.
React.SyntheticEvent<EventTarget>
name
value
target
非常感谢所有事件的更通用的答案。
谢谢
SyntheticEvent接口是通用的:
interface SyntheticEvent<T> { ... currentTarget: EventTarget & T; ... }
(从技术上讲,该currentTarget属性位于父BaseSyntheticEvent类型上。)
currentTarget
currentTarget是通用约束 和 的 交集EventTarget。 此外,由于您的事件是由输入元素引起的,您应该使用ChangeEvent(在定义文件中,反应文档中)。
EventTarget
ChangeEvent
应该:
update = (e: React.ChangeEvent<HTMLInputElement>): void => { this.props.login[e.currentTarget.name] = e.currentTarget.value }
(注意:此答案最初建议使用React.FormEvent。评论中的讨论与此建议有关,但React.ChangeEvent应如上所示使用。)
React.FormEvent
React.ChangeEvent