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

[Rrrrrr]

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

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

[JetMac]

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

[Rrrrrr]

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

[huijiewei]

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

这里的 demo 就有

[huijiewei]

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

[Rrrrrr]

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

[Rrrrrr]

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

[huijiewei]

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

[Rrrrrr]

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

[huijiewei]

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

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

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