H5W3
当前位置:H5W3 > 问答 > 正文

Typescript input onchange event.target.value

In my react and typescript app, I use: onChange={(e) => data.motto = (e.target as any).value}.

How do I correctly define the typings for the class, so I wouldn’t have to hack my way around the type system with any?

export interface InputProps extends React.HTMLProps<Input> {
...
}
export class Input extends React.Component<InputProps, {}> {
}

If I put target: { value: string }; I get :

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'.

Answer

Generally event handlers should use e.currentTarget.value, e.g.:

onChange = (e: React.FormEvent<HTMLInputElement>) => {
    const newValue = e.currentTarget.value;
}

You can read why it so here (Revert “Make SyntheticEvent.target generic, not SyntheticEvent.currentTarget.”).

UPD: As mentioned by @roger-gusmao ChangeEvent more suitable for typing form events.

onChange = (e: React.ChangeEvent<HTMLInputElement>)=> {
   const newValue = e.target.value;
}

本文地址:H5W3 » Typescript input onchange event.target.value

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址