在下一个js中提交后如何清除表单？答案

【问题标题】：how to clear form after submit in next js?在下一个js中提交后如何清除表单？
【发布时间】：2021-08-28 01:45:34
【问题描述】：

这里我有一个联系表单，我希望表单的所有值在提交表单后都应该为空。
我已经编写了以下代码。但是在提交表单的值保持不变后这不起作用。
这里有什么问题以及如何解决它。

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>
    </>
    )
  }

【问题讨论】：

标签： javascript html reactjs next.js

【解决方案1】：

首先，确保您的 api-call 成功结束，根据您的代码，只有在请求成功通过时才清理表单:)

【讨论】：

【解决方案2】：

目前您在输入中缺少 value 属性，因此您的输入是不受控制的组件，这就是您在提交表单后无法清除它们的原因。

尝试添加value prop，如下所示：-

<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 />

【讨论】：

【解决方案3】：

添加 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>

【讨论】：