Reset button does not clear inputs in React-CodePudding

I have this simple form in my App form. I learned that a button with type="reset" clears the inputs, but it isn't working here with React. Am I missing something?

import { useState } from "react";

export default function App() {
  const [name, setName] = useState("");
  return (
    <form>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Name"
        name="name"
      />
      <button>Submit</button>
      <button type="reset">Reset</button>
    </form>
  );
}

CodePudding user response：

You must reset the state name with an empty string when the reset button is clicked.

export default function App() {
  const [name, setName] = useState("");

  const onClickReset = () => setName('');
  
  return (
    <form>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Name"
        name="name"
      />
      <button>Submit</button>
      <button type="reset" onClick={onClickReset}>Reset</button>
    </form>
  );
}

CodePudding user response：

import { useState } from "react";

export default function App() {
  const [name, setName] = useState("");
  return (
    <form>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Name"
        name="name"
      />
      <button>Submit</button>
      <button type="reset" onClick={() => setName('')}>Reset</button>
    </form>
  );
}

CodePudding user response：

Use an object to maintain the initial state of the form and on RESET, update the state using the initial object.

Also, use event.preventDefault() to prevent the default action of the reset button.

const {useState} = React;


 function App() {
   const initState = {
     name:''
   };
  const [name, setName] = useState(initState.name);
  const onReset = (e)=>{
    e.preventDefault();
    setName(initState.name);
  }
  return (
    <form>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Name"
        name="name"
      />
      <button>Submit</button>
      <button type="reset" onClick={e=>onReset(e)}>Reset</button>
    </form>
  );
}
ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
)

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

CodePudding user response：

The reason for this is that your input is now controlled by a state, if you want to clear the form by type='reset' try removing the value and onChange attributes in your input. but if you want to clear the state you can create a function that will handle this. here's a sample function for your reference.

function handleClear() {
   setName('')
}

<button type="button" onClick={handleClear}>Reset</button>