web-dev-qa-db-ja.com

タイプスクリプト：リアクトイベントタイプ

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

ここではイベントタイプとしてどのタイプを使用しますか？

nameとvalueがtargetに存在しないというエラーが表示されるので、React.SyntheticEvent<EventTarget>は機能していないようです。

すべてのイベントに対するより一般化された回答は本当にありがたいです。

ありがとう

javascriptreactjstypescript
68
r.sendecky

SyntheticEvent インタフェースは一般的です。

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

そしてcurrentTargetは一般的な制約とEventTargetの共通部分です。
また、あなたのイベントはinput要素によって引き起こされるので、あなたはFormEvent（ 定義ファイル内 、 反応ドキュメント ）を使うべきです。

する必要があります：

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

問題はEvent型にはありませんが、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;
}

そのため、EventTargetにnameとvalueが存在しないことは正しいことです。あなたがする必要があるのはあなたが必要とする特性を持つ特定の要素型にターゲットをキャストすることです。この場合、それはHTMLInputElementになります。

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

また、React.SyntheticEventの代わりにイベントの場合は、次のように入力することもできます。Event、MouseEvent、KeyboardEvent...などは、ハンドラーのユースケースによって異なります。

これらすべての型定義を確認する最善の方法は、TypeScriptとreactの両方から.d.tsファイルをチェックアウトすることです。

また、より詳しい説明については以下のリンクをチェックしてください： Event.targetがタイプスクリプトの要素ではないのはなぜですか？

16
Edwin

Nitzanの答えとEdwinの答えの両方を組み合わせると、私はこのようなことがうまくいくことがわかりました。

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

最も簡単な方法は、

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();
}
6
Serg The Bright