next.js提交后如何清除表格？

Question

這里我有一個聯系表格，我希望在提交表格后表格的所有值都應該是空的。
我寫了以下代碼。但是在提交表單的值保持不變后這不起作用。
這里的問題是什么以及如何解決。

export default function contact() {

  const[name,setName]=useState("")
  const[phone,setPhone]=useState("")
  const[email,setEmail]=useState("")
  const[query,setQuery]=useState("")
  const [submitted, setSubmitted] = useState(false)

const  handleSubmit=(e)=>{
    e.preventDefault()
    console.log(e);
    let data = {
      name,
      email,
      phone,
      query
    }
    console.log(data);
    axios.post('http://127.0.0.1:8000/api/create/',data).then((res)=>{
      console.log(res);
      setSubmitted(true)
      setName('')
      setPhone('')
      setEmail('')
      setQuery('')
    })
  }
    return (
    <>
      <div>
        <h1>Contact Page</h1>
      </div>
        
        <div >    
           <form action="contact" method="post">
              <input name="name"  onChange={(e)=>{setName(e.target.value)}} placeholder="Name" / ><br />
              <input name="phone" onChange={(e)=>{setPhone(e.target.value)}} placeholder="Phone" /><br />
              <input name="email" onChange={(e)=>{setEmail(e.target.value)}} type="email" placeholder="E-mail" / ><br />
              <textarea name="text" onChange={(e)=>{setQuery(e.target.value)}} placeholder="How can we help you?" ></textarea><br />
              <button onClick={(e)=>{handleSubmit(e)}} value="Send" >Submit </button>
          </form> 
               
                                
      </div>
    </>
    )
  }

Answer 1

目前您的輸入中缺少value prop，因此您的輸入是不受控制的組件，這就是為什么您無法在提交表單后清除它們的原因。

嘗試像下面這樣添加value道具：-

<input name="name" value={name} onChange={(e)=>{setName(e.target.value)}} placeholder="Name" / ><br />
<input name="phone" value={phone} onChange={(e)=>{setPhone(e.target.value)}} placeholder="Phone" /><br />
<input name="email" value={email} onChange={(e)=>{setEmail(e.target.value)}} type="email" placeholder="E-mail" / ><br />
<textarea name="text" value={query} onChange={(e)=>{setQuery(e.target.value)}} placeholder="How can we help you?" ></textarea><br />

Answer 2

添加value支持您的輸入，然后您的表格將在提交后被清除：

<form>
    <input name="name" value={name} onChange={(e)=>{setName(e.target.value)}} placeholder="Name" / ><br />
    <input name="phone" value={phone} onChange={(e)=>{setPhone(e.target.value)}} placeholder="Phone" /><br />
    <input name="email" value={email} onChange={(e)=>{setEmail(e.target.value)}} type="email" placeholder="E-mail" / ><br />
    <textarea name="text" value={query} onChange={(e)=>{setQuery(e.target.value)}} placeholder="How can we help you?" ></textarea><br />
</form>

Answer 3

首先，確保您的 api 調用成功結束，根據您的代碼，只有在請求成功通過時才清理表單:)

Answer 4

我認為更好的方法是使用 rest 方法使用 .reset() 方法。

像這樣：

document.getElementById("postCodeForm").reset();