How to reset input field values tracked by useRef in React?

This article will show how to reset input field values ​​tracked by useRef in React. You can do this using the current.reset() method or the current. value method. Let’s go into detail now.

Reset input field values tracked by useRef in React

Using the current.reset() method

The idea is that we will use the reset() method with the form to reset the fields in the form. The example below will show you how it works.

Code:

import React from "react";
import { useState } from "react";
import { useRef } from "react";

const App = () => {
  const formRef = useRef();
  const [text, setText] = useState("");
  const handleClick = () => {
    formRef.current.reset();
  };
  return (
    <>
      <h2>
        Reset input field values tracked by useRef in React | LearnShareIT
      </h2>
      <form ref={formRef}>
        <input
          type="text"
          value={text}
          onChange={(e) => setText(e.target.value)}
        />
        <button onClick={handleClick}>Submit</button>
      </form>
    </>
  );
};

export default App;

Output:

When we use useRef on form and set it as formRef we can also access its methods. As in this example, we access the current.reset() method to reset the input value to empty like the original.

Using the current.value method

There are many ways to get input value in JavaScript. However, in general, these features all use the value function. JavaScript inputs will be entered from the text boxes. We can use the following methods to set the value of the input to empty. Because in the beginning, usually, the input will have an initial value of null, we will try to reset the value of the input to null.

Code:

import React from "react";
import { useState } from "react";
import { useRef } from "react";

const App = () => {
  const inputRef = useRef();
  const [text, setText] = useState("");
  const handleClick = () => {
    inputRef.current.value = "";
  };
  return (
    <>
      <h2>
        Reset input field values tracked by useRef in React | LearnShareIT
      </h2>
      <form>
        <input
          type="text"
          value={text}
          onChange={(e) => setText(e.target.value)}
          ref={inputRef}
        />
        <button onClick={handleClick}>Submit</button>
      </form>
    </>
  );
};

export default App;

Using the method that gets the value of each input inside the form using useRef in combination with the current.value, we can reset the value to null as it was. 

However, this approach must set a ref for each input to access its value. Wish you success with the methods in the article.

Summary

To sum up, you already know two ways to reset input field values ​​tracked by useRef in React, but we recommend you use the reset() method. If you have any problems, please comment below. We will answer as possible. Thanks for reading!

Maybe you are interested:

• Get the value of an Input field using a Ref in React
• How To Clear An Input Field’s Value In React.js
• Create a Numbers only Input field in React.js

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs