How to use refs in React with Typescript

Question

I m using Typescript with React  I m having trouble understanding how to use refs so as to get static typing and intellisense with respect to the react nodes referenced by the refs  My code is as follows   import   as React from  react    interface AppState       count  number     interface AppProps       steps  number     interface AppRefs       stepInput  HTMLInputElement     export default class TestApp extends React Component lt AppProps  AppState gt     constructor props  AppProps        super props       this state             count  0           incrementCounter         this setState  count  this state count   1       render         return            lt div gt               lt h1 gt Hello World lt  h1 gt               lt input type  text  ref  stepInput    gt               lt button onClick       gt  this incrementCounter    gt Increment lt  button gt              Count    this state count           lt  div gt

User · Answer

EDIT  This is no longer the right way to use refs with Typescript  Look at Jeff Bowen s answer and upvote it to increase its visibility   Found the answer to the problem  Use refs as below inside the class   refs         key  string    Element       stepInput   HTMLInputElement       Thanks  basarat for pointing in the right direction

User · Answer

class SelfFocusingInput extends React Component lt   value  string  onChange   value  string    gt  any       gt       ctrls            input   HTMLInputElement                  render             return                lt input                 ref   input    gt  this ctrls input   input                  value  this props value                  onChange   e    gt    this props onChange this ctrls input value                        gt                       componentDidMount             this ctrls input focus              put them in an object

User · Answer

For those looking on how to do it when you have an array of elements   const textInputRefs   useRef lt  HTMLDivElement   null    gt            const onClickFocus    event  React BaseSyntheticEvent  index  number    gt        textInputRefs current index   focus             items map  item  index    gt         lt textInput         inputRef   ref    gt  textInputs current index    ref        gt       lt Button         onClick  event   gt  onClickFocus event  index         gt

User · Answer

Lacking a complete example  here is my little test script for getting user input when working with React and TypeScript  Based partially on the other comments and this link https   medium com  basarat strongly-typed-refs-for-react-typescript-9a07419f807  cdrghertm       lt reference path  typings react react-global d ts    gt      Init our code using jquery on document ready   function          ReactDOM render  lt ServerTime   gt   document getElementById  reactTest          interface IServerTimeProps      interface IServerTimeState       time  string     interface IServerTimeInputs       userFormat   HTMLInputElement     class ServerTime extends React Component lt IServerTimeProps  IServerTimeState gt        inputs  IServerTimeInputs            constructor             super            this state     time   unknown               render             return                lt div gt                   lt div gt Server time    this state time   lt  div gt                   lt input type  text  ref   a   gt  this inputs userFormat   a   defaultValue  s   gt  lt  input gt                   lt button onClick   this  buttonClick bind this    gt GetTime lt  button gt               lt  div gt                           Update state with value from server      buttonClick    void       alert  Format   this inputs userFormat value                 This part requires a listening web server to work  but alert shows the user input     jQuery ajax           method   POST           data    format  this inputs userFormat value            url    Home ServerTime           success   result    gt                this setState   time   result

User · Answer

From React type definition      type ReactInstance   Component lt any  any gt    Element           refs                 key  string   ReactInstance          So you can access you refs element as follow  stepInput        gt  ReactDOM findDOMNode this refs  stepInput       without redefinition of refs index    As  manakor mentioned you can get error like     Property  stepInput  does not exist on type     key  string     Component   Element      if you redefine refs depends on IDE and ts version you use

User · Answer

To use the callback style  https   facebook github io react docs refs-and-the-dom html  as recommended on React s documentation you can add a definition for a property on the class   export class Foo extends React Component lt        gt       You don t need to use  references  as the name references           If you are using other components be more specific than HTMLInputElement     myRef  HTMLInputElement            myRef  null        myFunction            Use like this     this references myRef focus          render         return  lt input ref   i  any    gt    this references myRef   i      gt

User · Answer

If you re using React FC  add the HTMLDivElement interface   const myRef   React useRef lt HTMLDivElement gt  null     And use it like the following   return  lt div ref  myRef    gt

User · Answer

React createRef  class components  class ClassApp extends React Component     inputRef   React createRef lt HTMLInputElement gt          render         return  lt input type  quot text quot  ref  this inputRef    gt         Note  Omitting the old String Refs legacy API here     React useRef  Hooks   function components  Readonly refs for DOM nodes  const FunctionApp        gt      const inputRef   React useRef lt HTMLInputElement gt  null     note the passed in  null  arg   return  lt input type  quot text quot  ref  inputRef    gt     Mutable refs for arbitrary stored values  const FunctionApp        gt      const renderCountRef   useRef 0    useEffect      gt        renderCountRef current    1               other render code    Note  Don t initialize useRef with null in this case  It would make the renderCountRef type readonly  see example   If you need to provide null as initial value  do this  const renderCountRef   useRef lt number   null gt  null    Callback refs  work for both     Function component example  const FunctionApp        gt      const handleDomNodeChange    domNode  HTMLInputElement   null    gt               do something with changed dom node        return  lt input type  quot text quot  ref  handleDomNodeChange    gt     Playground sample

User · Answer

If you   re using React 16 3   the suggested way to create refs is using React createRef     class TestApp extends React Component lt AppProps  AppState gt        private stepInput  React RefObject lt HTMLInputElement gt       constructor props            super props           this stepInput   React createRef              render             return  lt input type  text  ref  this stepInput    gt             When the component mounts  the ref attribute   s current property will be assigned to the referenced component DOM element and assigned back to null when it unmounts  So  for example  you can access it using this stepInput current   For more on RefObject  see  apieceofbart s answer or the PR createRef   was added in     If you   re using an earlier version of React   lt 16 3  or need more fine-grained control over when refs are set and unset  you can use    callback refs      class TestApp extends React Component lt AppProps  AppState gt        private stepInput  HTMLInputElement      constructor props            super props           this stepInput   null          this setStepInputRef   element   gt                this stepInput   element                       render             return  lt input type  text  ref  this setStepInputRef    gt            When the component mounts  React will call the ref callback with the DOM element  and will call it with null when it unmounts  So  for example  you can access it simply using this stepInput   By defining the ref callback as a bound method on the class as opposed to an inline function  as in a previous version of this answer   you can avoid the callback getting called twice during updates     There used to be an API where the ref attribute was a string  see Akshar Patel s answer   but due to some issues  string refs are strongly discouraged and will eventually be removed     Edited May 22  2018 to add the new way of doing refs in React 16 3  Thanks  apieceofbart for pointing out that there was a new way

User · Answer

If you wont to forward your ref  in Props interface you need to use RefObject lt CmpType gt  type from import React    RefObject   from  react

User · Answer

Since React 16 3 the way to add refs is to use React createRef as Jeff Bowen pointed in his answer  However you can take advantage of Typescript to better type your ref    In your example you re using ref on input element  So they way I would do it is   class SomeComponent extends React Component lt IProps  IState gt        private inputRef  React RefObject lt HTMLInputElement gt       constructor                         this inputRef   React createRef                        render              lt input type  text  ref  this inputRef    gt             By doing this when you want to make use of that ref you have access to all input methods   someMethod         this inputRef current focus        current  is input node  autocompletion  yay      You can use it on custom components as well   private componentRef  React RefObject lt React Component lt IProps gt  gt     and then have  for example  access to props    this componentRef current props      props  satisfy IProps interface

User · Answer

I always do this  in that case to grab a ref  let input  HTMLInputElement     ReactDOM findDOMNode lt HTMLInputElement gt  this refs input

User · Answer

For typescript user no constructor required        private divRef  HTMLDivElement   null   null  getDivRef    ref  HTMLDivElement   null   void   gt        this divRef   ref    render         return  lt div ref  this getDivRef    gt

User · Answer

One way  which I ve been doing  is to setup manually     refs         string  string   any      stepInput any      then you can even wrap this up in a nicer getter function  e g  here     stepInput       HTMLInputElement   gt  ReactDOM findDOMNode this refs stepInput

User · Answer

Just to add a different approach - you can simply cast your ref  something like   let myInputElement  Element   this refs  myInput   as Element

[reactjs] How to use refs in React with Typescript

Examples related to reactjs

Examples related to typescript