17

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?

DoneDeal0
  • 5,273
  • 13
  • 55
  • 114

5 Answers5

22

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>
felixmosh
  • 32,615
  • 9
  • 69
  • 88
17

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>
harish kumar
  • 1,732
  • 1
  • 10
  • 21
  • If you see the last comment in question, he just wanted to reset value of the input field. To complete reset the form, user can use Ref in `
    ` element and reset it by using `f_ref.current.reset()`
     – harish kumar Jun 16 '20 at 17:05
  • I've updated the example.. Thanks for the feedback. :) – harish kumar Jun 16 '20 at 17:13
  • yes, but your answer states to `reset the value...` this will be misleading to future users as you are not actually resetting - just clearing whatever is value is input - which would include any default. This is important when there is a default value. – Samuel Goldenbaum Jun 16 '20 at 17:17
  • 1
    Thanks for noticing it.. I'm updating my answer – harish kumar Jun 16 '20 at 17:22
  • Answers the question and is the 'more react way' to do this – o-faro Aug 30 '23 at 08:43
8

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.

subashMahapatra
  • 6,339
  • 1
  • 20
  • 26
0

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";
  };
ianmatthew
  • 26
  • 2
0

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
Ehsan Kazemi
  • 1
  • 1