How to reset input field in reactjs?-CodePudding

I'm Try to reset input field when user submit thire item. But I don't figure it out. Here is my code.

const onSubmit = (myData) => {
    const url = "https://automobilereact.herokuapp.com/product";
    const newData = { ...myData, sold: 0 };
    fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(newData),
    })
      .then((res) => res.json())
      .then((result) => console.log(result));

    const { data } = axios.post("https://automobilereact.herokuapp.com/add-item", {
      ...myData,
      email: user.email,
      sold: 0,
    });
  };

CodePudding user response：

There's multiple solutions but this is the best way to do it

bind the input to a state:

const [inputContent, setInputContent] = useState("Default value")

code for input:

<input onChange={(e) => setInputContent(e.target.value)} value={inputContent} />

On submit remove the inputContent value

const onSubmit = (myData) => {
  setInputContent("")
  // Rest of code...
  };

CodePudding user response：

const onSubmit = (myData) => {
    const url = "https://automobilereact.herokuapp.com/product";
    const newData = { ...myData, sold: 0 };
    fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(newData),
    })
      .then((res) => res.json())
      .then((result) => console.log(result));

    const { data } = axios.post("https://automobilereact.herokuapp.com/add-item", {
      ...myData,
      email: user.email,
      sold: 0,
    });

 // Try this out....
 let inputs = document.getElementById("id");
 inputs.value = "";
  };

Use this method for every input field. Just Set their value to empty. Like this...

let inputs = document.getElementById("id");
 inputs.value = "";
  };

Remember use all of them at the last of post method. If you use it before posting the value your data will be sent empty.