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: It doesn't work. How to fix this?

Solution 1:

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

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

  consthandleClick = () => {
    formRef.current.reset();
    return'hello world';
  };

  return (
    <formref={formRef}><inputtype="text" /><buttononClick={handleClick}type="button">
        delete all
      </button></form>
  );
};
ReactDOM.render(<App />, document.getElementById('root'));

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

Solution 2:

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

consthandleClick= () => {
 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();

consthandleClick = () => { 
  formRef.current.reset();
}

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

if you don't want to use Ref

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

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

Solution 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,

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

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

Here is a codesandbox with both implementation.

Solution 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<buttononClick={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";
  };