Was ist der richtige Typ für React-Ereignisse? Anfangs habe ich nur any
der Einfachheit halber verwendet. Jetzt versuche ich, Dinge aufzuräumen und die Verwendung any
vollständig zu vermeiden .
Also in einer einfachen Form wie dieser:
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>
)
}
}
Welchen Typ verwende ich hier als Ereignistyp?
React.SyntheticEvent<EventTarget>
scheint nicht zu funktionieren , wie ich einen Fehler , dass name
und value
nicht existieren auf target
.
Eine allgemeinere Antwort für alle Veranstaltungen wäre sehr dankbar.
Vielen Dank
quelle
e.key
ist nur ein Teil von Tastaturereignissen.Das Problem liegt nicht beim Ereignistyp, sondern darin, dass die EventTarget-Schnittstelle in Typoskript nur drei Methoden hat:
So ist es richtig , dass
name
undvalue
existiert nicht auf Eventtarget. Sie müssen das Ziel mit den gewünschten Eigenschaften auf den spezifischen Elementtyp umwandeln. In diesem Fall wird es seinHTMLInputElement
.Auch für Veranstaltungen statt React.SyntheticEvent, man kann ihnen auch geben , wie folgend:
Event
,MouseEvent
,KeyboardEvent
... etc, hängt von dem Anwendungsfall des Handlers.Der beste Weg, um all diese Typdefinitionen zu sehen, besteht darin, die .d.ts-Dateien aus beiden Typoskripten auszuchecken und zu reagieren.
Weitere Erklärungen finden Sie auch unter folgendem Link: Warum ist Event.target kein Element in Typescript?
quelle
Um die Antworten von Nitzan und Edwin zu kombinieren, stellte ich fest, dass so etwas für mich funktioniert:
quelle
Ich denke, der einfachste Weg ist:
quelle
.ChangeEvent
war der Schlüssel für michSie können dies in Reaktion tun
quelle