打字稿：反应事件类型

作者: 妖邪
发布时间: 2024-12-18 02:04:05 (1月前)
转自：

5 条回复

0#
回复此人
张三岁 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 结合Nitzan和Edwin的答案，我发现这样的事情对我有用： </p> <pre> <code> update = (e: React.FormEvent<EventTarget>): void => { let target = e.target as HTMLInputElement; this.props.login[target.name] = target.value; } </code> </pre> </DIV>

编辑
1#
回复此人
afs-loliaholic | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 该 <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/react/index.d.ts#L277" rel="noreferrer"> SyntheticEvent </A> 接口是通用的： </p> <pre> <code> interface SyntheticEvent<T> { ... currentTarget: EventTarget & T; ... } </code> </pre> <P> 而且 <code> currentTarget </code> 是泛型约束和。的交集 <code> EventTarget </code> 。 <BR/> 此外，由于您的事件是由输入元素引起的，您应该使用 <code> FormEvent </code> （ <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L485" rel="noreferrer"> 在定义文件中 </A> ， <a href="https://facebook.github.io/react/docs/events.html#form-events" rel="noreferrer"> 反应文件 </A> ）。 </p> <P> 应该： </p> <pre> <code> update = (e: React.FormEvent<HTMLInputElement>): void => { this.props.login[e.currentTarget.name] = e.currentTarget.value } </code> </pre> </DIV>

编辑
2#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 问题不在于Event类型，而是typescript中的EventTarget接口只有3个方法： </p> <pre> <code> 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; } </code> </pre> <P> 所以这是正确的 <code> name </code> 和 <code> value </code> 在EventTarget上不存在。您需要做的是将目标强制转换为具有所需属性的特定元素类型。在这种情况下它将是 <code> HTMLInputElement </code> 。 </p> <pre> <code> update = (e: React.SyntheticEvent): void => { let target = e.target as HTMLInputElement; this.props.login[target.name] = target.value; } </code> </pre> <P> 对于事件而不是React.SyntheticEvent，您也可以按如下方式键入它们： <code> Event </code> ， <code> MouseEvent </code> ， <code> KeyboardEvent </code> ......等等，取决于处理程序的用例。 </p> <P> 查看所有这些类型定义的最佳方法是从两个打字稿和＆amp ;;中检出.d.ts文件。反应。 </p> <P> 另请查看以下链接以获取更多解释： <a href="https://stackoverflow.com/questions/28900077/why-is-event-target-not-element-in-typescript"> 为什么Event.target不是Typescript中的元素？ </A> </p> </DIV>

编辑
3#
回复此人
镜乃Kagamino | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我认为最简单的方法是： </p> <pre> <code> type InputEvent = React.ChangeEvent<HTMLInputElement>; type ButtonEvent = React.MouseEvent<HTMLButtonElement>; update = (e: InputEvent): void => this.props.login[e.target.name] = e.target.value; submit = (e: ButtonEvent): void => { this.props.login.logIn(); e.preventDefault(); } </code> </pre> </DIV>

编辑

登录后才能参与评论