Typescript: React イベントタイプ 質問する

Typescript: React イベントタイプ 質問する

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

すべてのイベントに対するより一般的な回答をいただければ幸いです。

ありがとう

ベストアンサー1

合成イベントインターフェースは汎用的です:

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

(技術的には、currentTargetプロパティは親にありますベース合成イベントタイプ。)

そして は、currentTargetジェネリック制約と の共通部分ですEventTarget
また、イベントは入力要素によって発生するため、ChangeEvent(定義ファイル内反応ドキュメント)。

正しくは:

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

(注: この回答では、もともと を使用することを提案していましたReact.FormEvent。コメントでの議論はこの提案に関連していますが、React.ChangeEvent上記のように使用する必要があります。)

おすすめ記事