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

This topic created in 937 days ago, the information mentioned may be changed or developed.

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

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

reset

form

State

9 replies • 2024-04-17 21:17:12 +08:00

JetMac

Apr 17, 2024

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

Rrrrrr

Apr 17, 2024

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

huijiewei

Apr 17, 2024

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

这里的 demo 就有

huijiewei

Apr 17, 2024

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

Rrrrrr

Apr 17, 2024

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

Rrrrrr

Apr 17, 2024

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

huijiewei

Apr 17, 2024

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

Rrrrrr

Apr 17, 2024

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

huijiewei

Apr 17, 2024

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

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

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