ReactJS Tutorial for Beginners -13

Image for post
Image for post
Refs

Welcome to part-13 of the series. You can find part-12 here. We will learn about Refs in this part.

Refs

Refs makes it possible to access DOM nodes directly within React. We will look into a very common example of focusing a text input.

Refs in HTML elements
We will create a simple class based file RefsDemo.js inside our components folder. We have a simple input box inside it.

Image for post
Image for post
RefsDemo.js

Next, we will add it in our App.js and it will show in the browser.

Image for post
Image for post
App.js

Now, to use refs we follow three simple steps. The first step is to create a ref using React.createRef(). We will do this in constructor and assign it to inputRef variable. The second step is to attach this ref to the input element.

The third step is to call the focus method, in this input element. But for that we need to check what is inside the this.inputRef, so we are console logging it in the componentDidMount().

As, we can see from the console log the current object holds our DOM element.

Image for post
Image for post
RefsDemo

We need to give this.inputRef.current.focus(); to get the focus on page load in our example.

Image for post
Image for post
Focus

We will see another use case of ref and this is to get the value entered, by the user in the text box.

Here, we had added a click handler to a button’s onCLick. In the clickHandler(), we are console logging the this.inputRef.current.value, which will give us the value entered by the user.

Image for post
Image for post
Current Value

Refs in Class components
In the previous example, we had added refs to HTML element. In this, we will look into the way to add Refs in Class components.

We will create a new file Input.js inside the components folder. We have a ref similar to earlier RefsDemo.js file. But, here instead of creating the focus in componentDidMount(), we will create a method focusInput(), that will focus the input element. The method, focusInput() will be called by the Parent Component.

Image for post
Image for post
Input.js

Next, we will create the Parent Component ie FocusInput. So, go ahead and create a file FocusInput.js inside the components folder. Here, we are again creating a ref variable componentRef, which is equal to React.createRef().

Next, we are passing the ref to the component Input. Now, we have a button which have a onClick event calling the clickHandler() function. Inside the function, we are using the componentRef to call the current and then the focusInput() of the child component Input.

Image for post
Image for post
FocusInput.js

Now, to see it in action we need to add the FocusInput in App component. Now, go ahead and click the button and the focus will be changed.

Image for post
Image for post
App.js

This completes part-13 of the series. You can find part-14 here.

You can also find the code for the same in github repo, here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store