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
。
すべてのイベントに対するより一般的な回答をいただければ幸いです。
ありがとう
ベストアンサー1
の合成イベントインターフェースは汎用的です:
interface SyntheticEvent<T> {
...
currentTarget: EventTarget & T;
...
}
(技術的には、currentTarget
プロパティは親にありますベース合成イベントタイプ。)
そして は、currentTarget
ジェネリック制約と の共通部分ですEventTarget
。
また、イベントは入力要素によって発生するため、ChangeEvent
(定義ファイル内、反応ドキュメント)。
正しくは:
update = (e: React.ChangeEvent<HTMLInputElement>): void => {
this.props.login[e.currentTarget.name] = e.currentTarget.value
}
(注: この回答では、もともと を使用することを提案していましたReact.FormEvent
。コメントでの議論はこの提案に関連していますが、React.ChangeEvent
上記のように使用する必要があります。)