React事件的正确类型是什么?
最初为了简单起见，我只是使用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>
)
}
}
我在这里使用什么类型作为事件类型?
反应。SyntheticEvent<EventTarget>似乎不工作，因为我得到一个错误，名称和值在目标上不存在。
对所有事件的更普遍的答案将真的很感激。
谢谢
我有以下类型。Ts文件的HTML输入，选择和文本区域:
export type InputChangeEventHandler = React.ChangeEventHandler<HTMLInputElement>
export type TextareaChangeEventHandler = React.ChangeEventHandler<HTMLTextAreaElement>
export type SelectChangeEventHandler = React.ChangeEventHandler<HTMLSelectElement>
然后导入它们:
import { InputChangeEventHandler } from '../types'
然后使用它们:
const updateName: InputChangeEventHandler = (event) => {
// Do something with `event.currentTarget.value`
}
const updateBio: TextareaChangeEventHandler = (event) => {
// Do something with `event.currentTarget.value`
}
const updateSize: SelectChangeEventHandler = (event) => {
// Do something with `event.currentTarget.value`
}
然后在标记上应用这些函数(替换…与其他必要的道具):
<input onChange={updateName} ... />
<textarea onChange={updateName} ... />
<select onChange={updateSize} ... >
// ...
</select>
问题不在于Event类型，而在于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。synticevent，你也可以输入如下:Event, MouseEvent, KeyboardEvent…等等，取决于处理程序的用例。
查看所有这些类型定义的最佳方法是签出.d。Ts文件从typescript和react。
也可以点击下面的链接了解更多解释:
为什么是事件。目标不是元素在Typescript?
