Next.js提交表单后如何清空表单字段？现有代码不生效该怎么解决？

• 表单元素未绑定value属性：你只给输入框绑定了onChange事件同步用户输入到state，但没有把输入框的value和对应的state做绑定，属于非受控组件，state变更不会触发输入框内容更新，所以即使你提交后把state设为空，输入框里的内容也不会变。
• 提交事件绑定位置错误：你把提交逻辑绑定到了按钮的onClick事件，没有绑定到form表单的onSubmit事件，用户按回车键提交表单时不会触发清空逻辑。
• 缺少请求异常处理：当前仅在请求成功的then回调里写了清空逻辑，如果接口请求失败、网络异常，then回调不会执行，表单也不会清空。
• 组件命名不规范：React组件名首字母必须大写，否则会被识别为普通HTML标签，可能引发异常。

import { useState } from 'react'
import axios from 'axios'

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()
    const data = { name, email, phone, query }
    axios.post('http://127.0.0.1:8000/api/create/', data)
      .then((res) => {
        console.log(res)
        setSubmitted(true)
        // 提交成功清空表单
        setName('')
        setPhone('')
        setEmail('')
        setQuery('')
      })
      .catch((err) => {
        console.error('提交失败：', err)
        // 可根据业务需求选择提交失败是否清空表单，或者弹出报错提示
      })
  }

  return (
    <>
      <div>
        <h1>Contact Page</h1>
      </div>
      <div>
        {/* 绑定form的onSubmit事件，不需要原生的action和method属性 */}
        <form onSubmit={handleSubmit}>
          {/* 每个输入框都绑定value属性到对应state，变为受控组件 */}
          <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?" 
          /><br />
          {/* 按钮设为submit类型，不需要单独绑定onClick事件 */}
          <button type="submit" value="Send">Submit</button>
        </form>
      </div>
    </>
  )
}

内容的提问来源于stack exchange，提问作者vikash kumar