TypeScript:React事件类型

JavaScript

阿飞泡芙

2020-03-12

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

对于所有事件的更笼统的回答,我们将不胜感激。

谢谢

第1003篇《TypeScript:React事件类型》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

5个回答
十三小哥 2020.03.12

你可以这样反应

handleEvent = (e: React.SyntheticEvent<EventTarget>) => {
  const simpleInput = (e.target as HTMLInputElement).value;
  //for simple html input values
  const formInput = (e.target as HTMLFormElement).files[0];
  //for html form elements
}
L 2020.03.12

问题不在于事件类型,而是 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.SyntheticEvent,你也可以输入他们如下:EventMouseEventKeyboardEvent...等,取决于处理程序的使用情况。

查看所有这些类型定义的最佳方法是从typescript和react中检出.d.ts文件。

另请查看以下链接以获取更多说明: 为什么Event.target不是Typescript中的Element?

EvaGil 2020.03.12

我认为最简单的方法是:

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();
}
飞云A 2020.03.12

SyntheticEvent接口是通用的:

interface SyntheticEvent<T> {
    ...
    currentTarget: EventTarget & T;
    ...
}

并且currentTarget是一般约束与的交集 EventTarget
另外,由于事件是由输入元素引起的,因此应使用FormEvent在定义文件中react docs)。

应该:

update = (e: React.FormEvent<HTMLInputElement>): void => {
    this.props.login[e.currentTarget.name] = e.currentTarget.value
}
GO小胖 2020.03.12

结合Nitzan和Edwin的答案,我发现类似这样的方法对我有用:

update = (e: React.FormEvent<EventTarget>): void => {
    let target = e.target as HTMLInputElement;
    this.props.login[target.name] = target.value;
}

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android