[解決済み】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>
というエラーが表示され、うまくいかないようです。
name
と
value
には存在しません。
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
は、上記のように使用する必要があります)。
関連
-
[解決済み】document.getElementByIDは関数ではありません。
-
[解決済み] Reactルータを使ったプログラムによるナビゲーション
-
[解決済み] React JSX内のループ
-
[解決済み] 動的に生成された要素にイベントバインディングを行うか?
-
[解決済み] Reactのこの3つの点は何をするところなのでしょうか?
-
[解決済み] TypeScriptで文字列を数値に変換する方法とは?
-
[解決済み] TypeScript で `window` に新しいプロパティを明示的に設定するにはどうすればよいですか?
-
[解決済み] React NativeとReactの違いは何ですか?
-
[解決済み] TypeScriptでの取得と設定
-
[解決済み】TypeScriptのインターフェースと型について
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】SecurityError: オリジンを持つフレームがクロスオリジンフレームにアクセスするのをブロックした
-
[解決済み】JavaScript "Uncaught TypeError: object is not a function" 連想性の質問
-
[解決済み】WebpackとBabelで「このファイルタイプを扱うには適切なローダーが必要な場合があります。
-
[解決済み】Reactのeslintエラーはpropsの検証で見つからない
-
[解決済み】npm install --legacy-peer-deps は具体的に何をするのですか?どんなときに推奨されるのか/どんな使用例が考えられるのか?
-
[解決済み】JavaScriptで相対URLへのリダイレクトを行う
-
[解決済み】Vueのテンプレートまたはレンダー関数が定義されていない 私はどちらも使っていないのですが?
-
[解決済み】Babel NodeJS ES6: SyntaxError: 予期しないトークンのエクスポート
-
[解決済み】TypeError:res.jsonは関数ではありません。
-
[解決済み] なぜTypescriptではEvent.targetはElementではないのですか?