How To Get The Value Of An Input Field Using A Ref In React

Get the value of an Input field using a Ref in React

In this tutorial, I will show you the way we can get the value of an input field using a Ref in React. Let’s see what the method is and an example of its use.

Get the value of an input field using a Ref in React

React Ref (React reference) is simply an object that references a variable. A component keeps its value unchanged between renders and retrieves those values ​​through the key current.

In Javascript, we call the method document.getElementById() or other selector syntaxes to get access to DOM elements 

However, with the ref attribute, things will be different. Using ref will allow us to refer directly to elements we need to use. It takes a variable or function. If it is a function, it will be executed when finished mounting the elements.

To access the input element, we must access the current property on the ref object, which we set to it. Take a look at this example for a better understanding:

import './App.css';
import {useRef} from 'react';

export default function App() {

    const inputFieldValue = useRef(null)

    function getValue() {
        console.log("Your message is: ", inputFieldValue.current.value)
    }

    return (
      <div className="container">

          <div className="input-group mb-3">
            <span className="input-group-text" id="inputGroup-sizing-default">Enter your message</span>
            <input type="text" className="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" 
                   ref={inputFieldValue}
                   id="message"
                   name="message"/>
          </div>

          <button type="button" className="btn btn-success" onClick={getValue}>Send Message</button>
      </div>
    );
} 

Output:

To illustrate, let us explain what we have done in the above program:

The useRef hook is a function whose current property is initialized by passing a parameter. And this function returns an object. In fact, the returned object can be mutated and persist for the component’s lifetime.

We set the ref attribute to the input tag, then access its value via the current key. eg: inputFieldValue.current.value

One thing worth noting: when the ref’s current property is changed, no rendering is caused. This will help reduce the number of times your application has to be re-rendered.

Whenever the user presses the “Send Message” button, you can see the value of the input field in the console window

In particular, if you set the value attribute for the input element, you will not be able to change the input field’s value, which means you cannot enter anything. Please take note of that.

Summary

To summarize, that’s all I want to cover in this tutorial. I hope the information we provided will help you understand how to get the value of an input field using a Ref in React. Try practicing on your computer and see the results.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *