如何重置reactjs中的輸入字段？

Question

當用戶提交三個項目時，我嘗試重置輸入字段。 但我不明白。 這是我的代碼。

 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, }); };

Answer 1

有多種解決方案，但這是最好的方法

將輸入綁定到一個狀態：

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

輸入代碼：

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

提交時刪除inputContent值

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

Answer 2

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

對每個輸入字段使用此方法。 只需將它們的值設置為空。 像這樣...

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

記住在 post 方法的最后使用它們。 如果您在發布值之前使用它，您的數據將被發送為空。