1. ホーム
  2. reactjs

[解決済み】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;
}