How to reset input field from useRef in React?

Question

I have a text input. If I click on a specific button in the page, I want to reset the value of the input. Here is my code:

const inputRef = useRef()

const handleClick= () => {
 inputRef.current.value.reset();
 return "hello world"
}

return (
<>
<input type="text" ref={inputRef}/>
<button onClick={()=> handleClick}>delete all</button>
</>
)

It doesn't work. How to fix this?

Answer 1

reset is available on form element. You can wrap your input with a form, and trigger reset on it.

const {useRef} = React;
const App = () => {
  const formRef = useRef();

  const handleClick = () => {
    formRef.current.reset();
  };

  return (
    <form ref={formRef}>
      <input type="text" />
      <input type="password" />
      <input type="checkbox" />
      <textarea></textarea>
      <button onClick={handleClick} type="button">
        clear form
      </button>
    </form>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

You can clear the value in the input field like below.

const handleClick= () => {
 inputRef.current.value = "";
 return "hello world"
}

and change onClick call in the button like below

onClick={handleClick}
//or
onClick={()=> handleClick()}

If you want complete reset of a form having multiple inputs, you can follow the below approach. In below example, form will reset after submit

const formRef = useRef();

const handleClick = () => { 
  formRef.current.reset();
}

render() {
  return (
    <form ref={formRef}>
      <input />
      <input />
      ...
      <input />
    </form>
  );
}

if you don't want to use Ref

const handleSubmit = e => {
 e.preventDefault();
 e.target.reset();
}

<form onSubmit={handleSubmit}>
  ...
</form>

Answer 3

You can clear the text input field by setting its value to an empty string. You can do that like this inputref.current.value = "" if you want to use uncontrolled inputs.

However, if you want to use controlled inputs you can create a state variable to track the value of the input field. For example,

const SomeComponent = () => {
  const [text, setText] = useState('')

  return (
    <>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={() => setText('')}>delete all</button>
    </>
  );
};

Here is a codesandbox with both implementation.

Answer 4

You have two problems, one you are passing a function that calls a function into your onClick handler -- which isn't needed. If you define the function before your render, you do not need to pass an anonymous function to the onClick handler.

// Before
<button onClick={()=> handleClick}>delete all</button>

// After
<button onClick={handleClick}>delete all</button>

The other problem is that your handleClick function calls reset, which is not a function on an input. To reset the value of the referenced input, you can set it to an empty string (or whatever you want the "default" value to be).

  const handleClick = e => {
   inputRef.current.value = "";
   return "hello world";
  };

Answer 5

rest value in input

import { useRef } from 'react'

const Test = () => {
  const testRef = useRef(null)
  return (
    <div>
      <input type="text" ref={testRef} />
      <button onClick={() => inputSearch.current.value = ''}>×</button>
    </div>
  )
}

export default Test