useActionState 阻止表单重置

前言

useActionState是react19新出的api，提供的非受控表单钩子。
但是他有一个缺点，就是每次提交表单后会重置表单状态！

官方美其名曰“遵守原生表现”，但是网上讨伐声音，就足以证明垃圾！
https://github.com/facebook/react/issues/29034
https://github.com/facebook/react/issues/30580

方式1（推荐）

定义重写全局的 form reset，新建 preventGlobalFormReset.ts

/*** 全局 Patch HTMLFormElement.prototype.reset 方法* 阻止 React 19 useActionState 自动重置表单* 参考: https://github.com/facebook/react/issues/29034** 使用方法：在应用入口调用一次 patchFormReset()** 控制选项：* - 默认：阻止所有表单重置* - <form data-allow-reset>：允许该表单重置* - <form data-prevent-reset>：明确阻止该表单重置* - formRef.current.reset(true)：手动调用时传入 true 强制重置*/// 保存原始方法的引用
let originalReset: typeof HTMLFormElement.prototype.reset | null = null;export function patchFormReset(options?: {/** 默认行为：'prevent' 阻止重置 | 'allow' 允许重置 */defaultBehavior?: 'prevent' | 'allow';
}) {if (typeof window === 'undefined') return;if (originalReset) {console.warn('[patchFormReset] 已经 patch 过了，跳过');return;}const { defaultBehavior = 'prevent' } = options || {};// 保存原始的 reset 方法originalReset = HTMLFormElement.prototype.reset;// 重写 reset 方法，支持传入参数强制重置HTMLFormElement.prototype.reset = function (this: HTMLFormElement, force?: boolean) {// 如果传入 true，强制重置if (force === true) {originalReset!.call(this);return;}// 检查表单上的属性const hasAllowReset = this.hasAttribute('data-allow-reset');const hasPreventReset = this.hasAttribute('data-prevent-reset');let shouldReset = defaultBehavior === 'allow';// 属性优先级高于默认行为if (hasAllowReset) {shouldReset = true;} else if (hasPreventReset) {shouldReset = false;}if (shouldReset) {originalReset!.call(this);} else {// 什么都不做，阻止重置}};
}/*** 恢复原始的 reset 方法*/
export function unpatchFormReset() {if (typeof window === 'undefined') return;if (!originalReset) {console.warn('[unpatchFormReset] 没有找到原始的 reset 方法');return;}HTMLFormElement.prototype.reset = originalReset;originalReset = null;console.log('[unpatchFormReset] HTMLFormElement.prototype.reset 已恢复');
}

在 main.ts 调用即可

// 全局阻止 React 19 useActionState 自动重置表单
patchFormReset({defaultBehavior: 'prevent', // 默认阻止重置
});

在组件中，如果想要手动调用重置，仍然可以，只不过加一个强制即可！

formRef.current.reset(true);

方式 2

如果你不想污染全局，可以这么做
订一个一个 hook，usePreventFormReset.ts

import { useEffect, useRef } from 'react';/*** 阻止 React 19 useActionState 自动重置表单* 参考: https://github.com/facebook/react/issues/29034#issuecomment-2843233452*/
export function usePreventFormReset() {const formRef = useRef<HTMLFormElement>(null);useEffect(() => {const watchReset = (e: Event) => e.preventDefault();formRef.current?.addEventListener('reset', watchReset);return () => formRef.current?.removeEventListener('reset', watchReset);}, []);return formRef;
}

然后组件内使用即可

// 阻止表单重置
const formRef = usePreventFormReset();<form action={formAction} ref={formRef}>
// ***
</form>