Next.js 13服务端组件中提交表单后如何清空表单？

你的表单组件已经标记为"use client"客户端组件，完全可以利用React客户端能力实现表单清空，以下是两种可行方案：

方案一：使用表单元素的reset()方法 #

通过useRef获取表单DOM元素，在服务端Action执行完成后调用reset()方法一键清空所有字段：

"use client"

import { addProductToDB } from "@/actions/serverActions"
import { useRef } from "react"

function Form() {
  const formRef = useRef<HTMLFormElement>(null)

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)
    await addProductToDB(formData)
    // 提交完成后重置表单
    formRef.current?.reset()
  }

  return (
    <form ref={formRef} onSubmit={handleSubmit} className='flex flex-col gap-5 max-w-xl mx-auto p-5'>
        <input type="text" 
          name='product'
          placeholder='输入产品名称'
          className='border border-gray-300 p-2 rounded-md'
        />
        <input type="text" 
         name='price'
         placeholder='输入价格'
         className='border border-gray-300 p-2 rounded-md'
        />
        <button type="submit" className='border bg-blue-500 text-white p-2 rounded-md'>
            添加
        </button>
      </form>
  )
}

export default Form

方案二：用State控制输入值 #

通过useState绑定输入框的值，提交完成后重置State来清空字段，适合需要实时处理输入校验、格式转换等客户端逻辑的场景：

"use client"

import { addProductToDB } from "@/actions/serverActions"
import { useState } from "react"

function Form() {
  const [product, setProduct] = useState("")
  const [price, setPrice] = useState("")

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const formData = new FormData()
    formData.append("product", product)
    formData.append("price", price)
    await addProductToDB(formData)
    // 重置输入状态
    setProduct("")
    setPrice("")
  }

  return (
    <form onSubmit={handleSubmit} className='flex flex-col gap-5 max-w-xl mx-auto p-5'>
        <input type="text" 
          name='product'
          value={product}
          onChange={(e) => setProduct(e.target.value)}
          placeholder='输入产品名称'
          className='border border-gray-300 p-2 rounded-md'
        />
        <input type="text" 
         name='price'
         value={price}
         onChange={(e) => setPrice(e.target.value)}
         placeholder='输入价格'
         className='border border-gray-300 p-2 rounded-md'
        />
        <button type="submit" className='border bg-blue-500 text-white p-2 rounded-md'>
            添加
        </button>
      </form>
  )
}

export default Form

说明 #

虽然提交逻辑是服务端Action，但表单本身是客户端组件，完全可以使用React的客户端hooks来处理UI状态。两种方案都能在提交成功后清空字段，你可以根据是否需要额外的客户端输入逻辑来选择。

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