CODEWITHSUNDEEP
javascriptreactjs
DoneDeal0
DoneDeal0

Reputation: 6257

How to reset input field from useRef in React?

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?

Upvotes: 20

Views: 69188

Answers (5)

Ehsan Kazemi
Ehsan Kazemi

Reputation: 11

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

Upvotes: 0

felixmosh
felixmosh

Reputation: 35503

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>

Upvotes: 25

ianmatthew
ianmatthew

Reputation: 26

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";
  };

Upvotes: 0

harish kumar
harish kumar

Reputation: 1759

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>

Upvotes: 18

subashMahapatra
subashMahapatra

Reputation: 6837

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.

Upvotes: 9

Related Questions