[解決済み】Typescript input onchange event.target.value
2022-03-30 18:04:16
質問
reactとtypescriptのアプリで、私は使用しています。
onChange={(e) => data.motto = (e.target as any).value}
.
このクラスの型付けを正しく定義するにはどうしたらよいでしょうか。
any
?
export interface InputProps extends React.HTMLProps<Input> {
...
}
export class Input extends React.Component<InputProps, {}> {
}
もし私が
target: { value: string };
私は得る。
ERROR in [default] /react-onsenui.d.ts:87:18
Interface 'InputProps' incorrectly extends interface 'HTMLProps<Input>'.
Types of property 'target' are incompatible.
Type '{ value: string; }' is not assignable to type 'string'.
解決方法は?
一般的にイベントハンドラは
e.currentTarget.value
, 例:
onChange = (e: React.FormEvent<HTMLInputElement>) => {
const newValue = e.currentTarget.value;
}
その理由はこちらでどうぞ( SyntheticEvent.currentTarget.quotではなく、SyntheticEvent.targetを一般的なものに変更しました。 ).
UPD: @roger-gusmao さんのご指摘の通りです。
ChangeEvent
は、フォームイベントの入力に適しています。
onChange = (e: React.ChangeEvent<HTMLInputElement>)=> {
const newValue = e.target.value;
}
関連
-
[解決済み] テスト
-
[解決済み】プリセットファイルはオブジェクトのエクスポートができない
-
[解決済み] ReactjsのEsLintの "react / jsx-props-no-spreading "エラーを無効化する。
-
[解決済み] eslint: no-case-declaration - case ブロックで予期しない字句の宣言があった。
-
[解決済み] 拡張子.tsと.tsxの違いは何ですか?どちらもreactのタイプスクリプトファイルの拡張子として使用されます。では、どこで使うべきなのでしょうか?
-
[解決済み] ngModel' は 'input' の既知のプロパティではないため、バインドできません。
-
[解決済み] TypeScriptで文字列を数値に変換する方法とは?
-
[解決済み] TypeScriptでの取得と設定
-
[解決済み] JSX.ElementとReactNodeとReactElementの使い分けは?
-
[解決済み】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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Typescript react - モジュール ''react-materialize'' の宣言ファイルが見つかりませんでした。'path/to/module-name.js' は暗黙のうちに any 型を持ちます。
-
[解決済み] reactでonloadを使うには?
-
[解決済み] react - createMuiThemeとcreateThemeの違い。
-
[解決済み] SVGサークル内の画像にボーダーを追加する方法
-
[解決済み] リアクトです。<tr>は<td>の子として表示できません。コメント > td > tr を参照してください。
-
[解決済み] Webpack のコンパイルに失敗した
-
[解決済み] reactstrapのドロップダウンで選択されたアイテムを設定する方法は?
-
[解決済み] ReactJs "インバリアント違反..." リアクトの古典的な問題
-
React はエラー TypeError を報告します。未定義のプロパティ 'XX' を読み取ることができない、問題は解決されました。
-
[解決済み] ESLintとTSLintの違い【クローズド】について