next.js 14 中，如果使用了 server action，怎么 reset form

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 218 天前的主题，其中的信息可能已经有所发展或是发生改变。

我看了一些解决方法，把它转成 use client ，然后就可以用 ref.current?.reset()

如果不改成用 use client ，还是 use server 的 action ，怎么重置 form 呢？

9 条回复 • 2024-04-17 21:17:12 +08:00

JetMac

217 天前

正好在看文档。难道不是一行 reset 就解决了吗 <Button type="reset">Reset</Button>

Rrrrrr

217 天前

@JetMac #1 这多了一步，我的意思是在提交的完成后，清空。不用再点一下

huijiewei

217 天前

https://react.dev/reference/react-dom/components/form#optimistically-updating-form-data

这里的 demo 就有

huijiewei

217 天前

随便一搜也有 https://sabin.dev/blog/how-to-clear-your-forms-when-using-server-actions-in-nextjs

Rrrrrr

217 天前

@huijiewei #4 感谢，就是得包多一层是吧。我也有见到这种方法，没想到官方也是这样

Rrrrrr

217 天前

最后还是得把组件转 client 。我感觉有点无语

huijiewei

217 天前

@Rrrrrr 要想自动重置表单那肯定要走 client 啊。服务端怎么可能做到。

Rrrrrr

217 天前

@huijiewei #7 不是很懂 nextjs 中，服务端渲染和客户端渲染的比例如何，但从它默认渲染方式是服务端看出，应该大部分都能用这种方式解决才对，比如通过勾子这类方法让前端再去处理感觉也可以。不然现在这种做法有点像是半成品的感觉。

huijiewei

217 天前

@Rrrrrr server action 你就当和 PHP 一样，PHP 的服务端代码能自动 reset 表单么，肯定也不能吧，也得刷新页面或者用 jquery 触发 reset 。

nextjs 主要是要分清 use server, use client 还有 SSR 这些概念的区别

use server 你就当是 PHP echo 了一段纯 html 代码，一旦有任何 dom 交互就无效了
use client 就是传统的 React 组件了，同时也支持 SSR 补水