Typescript React event types

Question

What is the correct type for React events  Initially I just used any for the sake of simplicity  Now  I am trying to clean things up and avoid use of any completely   So in a simple form like this   export interface LoginProps     login         k  string   string   Function     uname  string     passw  string     logIn  Function        inject  login    observer export class Login extends Component lt LoginProps     gt      update    e  React SyntheticEvent lt EventTarget gt    void   gt        this props login e target name    e target value       submit    e  any   void   gt        this props login logIn       e preventDefault         render         const   uname  passw     this props login     return          lt div id  login   gt           lt form gt             lt input             placeholder  Username              type  text              name  uname              value  uname              onChange  this update              gt             lt input             placeholder  Password              type  password              name  passw              value  passw              onChange  this update              gt             lt button type  submit  onClick  this submit   gt              Submit            lt  button gt           lt  form gt         lt  div gt                What type do I use here as event type   React SyntheticEvent lt EventTarget gt  does not seem to be working as I get an error that name and value do not exist on target   More generalised answer for all events would be really appreciated   Thanks

User · Accepted Answer

The SyntheticEvent interface is generic  interface SyntheticEvent lt T gt                currentTarget  EventTarget  amp  T              Technically the currentTarget property is on the parent BaseSyntheticEvent type   And the currentTarget is an intersection of the generic constraint and  EventTarget  Also  since your events are caused by an input element you should use the ChangeEvent  in definition file  the react docs   Should be  update    e  React ChangeEvent lt HTMLInputElement gt    void   gt        this props login e currentTarget name    e currentTarget value     Note  This answer originally suggested using React FormEvent  The discussion in the comments is related to this suggestion  but React ChangeEvent should be used as shown above

User · Answer

for update  event  React ChangeEvent for submit  event  React FormEvent for click  event  React MouseEvent

User · Answer

To combine both Nitzan s and Edwin s answers  I found that something like this works for me   update    e  React FormEvent lt EventTarget gt    void   gt        let target   e target as HTMLInputElement      this props login target name    target value

User · Answer

I have the following in a types ts file for html input  select  and textarea  export type InputChangeEventHandler   React ChangeEventHandler lt HTMLInputElement gt  export type TextareaChangeEventHandler   React ChangeEventHandler lt HTMLTextAreaElement gt  export type SelectChangeEventHandler   React ChangeEventHandler lt HTMLSelectElement gt   Then import them  import   InputChangeEventHandler   from     types   Then use them   const updateName  InputChangeEventHandler    event    gt         Do something with  event currentTarget value    const updateBio  TextareaChangeEventHandler    event    gt         Do something with  event currentTarget value    const updateSize  SelectChangeEventHandler    event    gt         Do something with  event currentTarget value     Then apply the functions on your markup  replacing     with other necessary props    lt input onChange  updateName        gt   lt textarea onChange  updateName        gt   lt select onChange  updateSize       gt            lt  select gt

User · Answer

The problem is not with the Event type  but that the EventTarget interface in typescript only has 3 methods    interface EventTarget       addEventListener type  string  listener  EventListenerOrEventListenerObject  useCapture   boolean   void      dispatchEvent evt  Event   boolean      removeEventListener type  string  listener  EventListenerOrEventListenerObject  useCapture   boolean   void     interface SyntheticEvent       bubbles  boolean      cancelable  boolean      currentTarget  EventTarget      defaultPrevented  boolean      eventPhase  number      isTrusted  boolean      nativeEvent  Event      preventDefault    void      stopPropagation    void      target  EventTarget      timeStamp  Date      type  string      So it is correct that name and value don t exist on EventTarget  What you need to do is to cast the target to the specific element type with the properties you need  In this case it will be HTMLInputElement   update    e  React SyntheticEvent   void   gt        let target   e target as HTMLInputElement      this props login target name    target value      Also for events instead of React SyntheticEvent  you can also type them as following  Event  MouseEvent  KeyboardEvent   etc  depends on the use case of the handler   The best way to see all these type definitions is to checkout the  d ts files from both typescript  amp  react   Also check out the following link for more explanations  Why is Event target not Element in Typescript

User · Answer

I think the simplest way is that   type InputEvent   React ChangeEvent lt HTMLInputElement gt   type ButtonEvent   React MouseEvent lt HTMLButtonElement gt    update    e  InputEvent   void   gt  this props login e target name    e target value  submit    e   ButtonEvent   void   gt        this props login logIn        e preventDefault

User · Answer

For those who are looking for a solution to get an event and store something  in my case a HTML 5 element  on a useState here s my solution  const  anchorElement  setAnchorElement    useState lt HTMLButtonElement   null gt  null    const handleMenu    event  React MouseEvent lt HTMLButtonElement  MouseEvent gt     void   gt        setAnchorElement event currentTarget

User · Answer

you can do like this in react   handleEvent    e  React SyntheticEvent lt EventTarget gt     gt      const simpleInput    e target as HTMLInputElement  value      for simple html input values   const formInput    e target as HTMLFormElement  files 0       for html form elements

[javascript] Typescript: React event types

Examples related to javascript

Examples related to reactjs

Examples related to typescript