Typographie: types d'événements React

Quel est le type correct pour les événements React. Au départ, je l'ai juste utilisé anypar souci de simplicité. Maintenant, j'essaie de nettoyer les choses et d'éviter anycomplètement l' utilisation .

Donc, sous une forme simple comme celle-ci:

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>
    )
  }
}

Quel type dois-je utiliser ici comme type d'événement?

React.SyntheticEvent<EventTarget>ne semble pas fonctionner comme je reçois une erreur nameet valuen'existe pas sur target.

Une réponse plus générale pour tous les événements serait vraiment appréciée.

Merci

L' interface SyntheticEvent est générique:

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

Et le currentTargetest une intersection de la contrainte générique et EventTarget.
De plus, puisque vos événements sont causés par un élément d'entrée, vous devez utiliser le FormEvent( dans le fichier de définition , les documents react ).

Devrait être:

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

Le problème ne vient pas du type Event, mais que l'interface EventTarget en typographie n'a que 3 méthodes:

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;
}

Il est donc correct nameet valuen'existe pas sur EventTarget. Ce que vous devez faire est de convertir la cible dans le type d'élément spécifique avec les propriétés dont vous avez besoin. Dans ce cas, ce sera le cas HTMLInputElement.

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

De plus pour les événements au lieu de React.SyntheticEvent, vous pouvez également les saisir comme suit: Event, MouseEvent, KeyboardEvent... etc, dépend du cas d'utilisation du gestionnaire.

La meilleure façon de voir toutes ces définitions de type est d'extraire les fichiers .d.ts à la fois du texte et de réagir.

Consultez également le lien suivant pour plus d'explications: Pourquoi Event.target n'est-il pas un élément dans Typescript?

Pour combiner les réponses de Nitzan et d'Edwin, j'ai trouvé que quelque chose comme ça fonctionne pour moi:

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

Je pense que le moyen le plus simple est que:

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();
}

tu peux faire comme ça en réagissant

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
}