Typescript: Реагувати типи подій

Який правильний тип подій 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.

Більш узагальнена відповідь на всі події була б дуже вдячна.

Дякую

Інтерфейс SyntheticEvent є загальним:

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

І currentTargetє перетином родового обмеження і EventTarget.
Крім того, оскільки ваші події спричинені вхідним елементом, ви повинні використовувати FormEvent( у файлі визначення , документи реагування ).

Має бути:

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

Проблема полягає не в типі події, а в тому, що інтерфейс EventTarget у typecript має лише 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, ви можете також ввести їх в такий спосіб : Event, MouseEvent, KeyboardEvent... і т.д., в залежності від випадку використання обробника.

Найкращий спосіб переглянути всі ці типові визначення - перевірити файли .d.ts з обох типів та реагувати.

Також перегляньте наступне посилання для отримання додаткових пояснень: Чому Event.target не є елементом у Typescript?

Щоб поєднати відповіді Нітзана та Едвіна, я виявив, що щось подібне на мене працює:

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

Я думаю, що найпростіший спосіб полягає в тому, що:

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

ви можете зробити так, як реагувати

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
}