javascript - setup - Mecanografiado: Reaccionar tipos de eventos

reactdom render example

Question

¿Cuál es el tipo correcto para los eventos React? Inicialmente solo usé any por simplicidad. Ahora, estoy tratando de limpiar las cosas y evitar el uso por completo.

Entonces, en una forma simple como esta:

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

¿Qué tipo uso aquí como tipo de evento?

React.SyntheticEvent<EventTarget> no parece funcionar ya que aparece un error de que el name y el value no existen en el target .

Se agradecería una respuesta más generalizada para todos los eventos.

Gracias

Answer 1

Creo que la forma más simple es 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();
}

Answer 2

El problema no es con el tipo de evento, sino que la interfaz EventTarget en mecanografiado solo tiene 3 métodos:

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

Por lo tanto, es correcto que el name y el value no existan en EventTarget. Lo que debe hacer es convertir el destino en el tipo de elemento específico con las propiedades que necesita. En este caso será HTMLInputElement .

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

También para eventos en lugar de React.SyntheticEvent, también puede escribirlos de la siguiente manera: Event , MouseEvent , KeyboardEvent ... etc., depende del caso de uso del controlador.

La mejor manera de ver todas estas definiciones de tipos es verificar los archivos .d.ts de ambos tipos de letra y reaccionar.

Consulte también el siguiente enlace para obtener más explicaciones: ¿Por qué Event.target no es Element en Typecript?

Answer 3

La interfaz SyntheticEvent es genérica:

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

Y el currentTarget es una intersección de la restricción genérica y EventTarget .
Además, dado que sus eventos son causados ​​por un elemento de entrada, debe usar FormEvent ( en el archivo de definición , los documentos de reacción ).

Debiera ser:

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

Answer 4

Para combinar las respuestas de Nitzan y Edwin, descubrí que algo como esto funciona para mí:

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