1. ホーム
  2. ジャバスクリプト

[解決済み】Typescript。Reactのイベントタイプ

2022-04-18 12:04:43

質問

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> というエラーが表示され、うまくいかないようです。 namevalue には存在しません。 target .

すべてのイベントに対するより一般的な回答があれば、本当にありがたい。

ありがとうございます。

解決方法は?

その 合成イベント インタフェースは汎用的である。

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

(厳密には currentTarget プロパティは親である BaseSyntheticEvent(ベースシンセティックイベント タイプ)

そして currentTarget は、一般的な制約の交点であり EventTarget .

また、イベントは input 要素によって発生するので ChangeEvent ( 定義ファイル中の , リアクトのドキュメント ).

であるべきです。

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

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