(React.js + Hooks) How to reset input field after button click?

Question

What I want to do is have an input that a user can type into. Upon clicking a button, take that input and process it and perform some backend operations with the database connected to the input. I'm trying to accomplish this with a state hook: onBlur, save input into state. On button click, do two things: 1) take the state variable and pass it to the backend resolvers, and 2) clear the input field so it's empty, and only the placeholder text exists.

I have this code:

const [inputVal, setInputVal] = useState("");

updateInput = (e) => {
    const val = e.target.value;
    setInputVal(val);
}

sendData = async () => {
    //handle async backend processing with inputVal
    setInputVal("");
    //rerender
}


<Button className="input-button" onClick={sendData}>Send Data</Button>
<input className="input-field" placeHolder="Input name." defaultValue={inputVal} onBlur=(updateInput)></input>

However, I have two issues.

On button click, I want to first updateInput, and then handle the button click, so it always uses the new value. However, it seems as if there are some issues with that, possibly due to the asynchronous nature of sendData?
While inputVal may be an empty String, for some reason, the value in the input box doesn't reset to nothing, it stays exactly as it was (although the internal data would still have inputVal = 0). And onBlur it reupdates the inputVal.

user15672038 · Accepted Answer · 2021-04-29 21:08:40Z

0

First, change defaultValue to value={inputVal} since it's a controlled input. Secondly, please elaborate on what issues you have in 1.

answered Apr 29, 2021 at 21:08

user15672038

Sign up to request clarification or add additional context in comments.

2 Comments

Jon Over a year ago

Firstly, I tried to do value={inputVal}, however, it seemed to not work, as I wasn't able to edit anything in the input at all. As for my issues regarding 1), clicking on a button to send the data triggers both the onBlur event and the button click event, the latter of which is handled asynchronously, and I want to ensure that the onBlur event that updates the input happens first, although I think I fixed that. I actually circumvented my issue with 2) by using a hook for the event.target and setting it's value to "", but I'm still curious as to why using value/defaultValue doesn't work.

user15672038 Over a year ago

I don't know if you're trying to update the inputs state onBlur or not but usually, you update the value of a controlled input by using an onChange handler, so that every time you type a character the state gets updated.

Rafael Buzatto de Campos · Accepted Answer · 2021-04-29 21:55:47Z

0

for a controlled state input the most common approach is to use onChange rather than onBlur. This would also avoid your conflicts with blur and click events. Also you would pass inputVal to value input's property.

  const [inputVal, setInputVal] = useState("");

  const updateInput = (e) => {
    const val = e.target.value;
    setInputVal(val);
  }

  const sendData = async () => {
    //handle async backend processing with inputVal
    setInputVal("");
    //rerender
  }

  return (
    <>
      <button className="input-button" onClick={sendData}>Send Data</button>
      <input className="input-field" onChange={updateInput} placeHolder="Input name." value={inputVal}/>
    </>
  );

answered Apr 29, 2021 at 21:55

Rafael Buzatto de Campos

10.5k6 gold badges29 silver badges36 bronze badges

Collectives™ on Stack Overflow

(React.js + Hooks) How to reset input field after button click?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related