如何用React 19的useActionState钩子实现表单新标签页提交？

之前用Formik或react-hook-form时，只需通过原生表单属性就能实现搜索表单验证通过后，在新标签页展示结果：

<Form action="my/results/page" method="POST" target="_blank" ref={formEl}>

但切换到React 19的useActionState钩子后，发现它会自动覆盖表单的action属性、设置method为POST，并且提交时自动调用event.stopPropagation()，导致无法利用原生属性指定结果页和打开新窗口。现有代码如下：

function handleFormSubmission(previousState, formData) {
    newFieldValues = Object.fromEntries(formData);
    const fieldsAreValid = validateFields(newFieldValues , fieldConfig);

    if (fieldsAreValid) {
        // 需在此处将newFieldValues提交到"my/results/page"并打开新标签页
        console.log('submitted', newFieldValues);
    }

    return newFieldValues;  // 更新React表单状态
}

const [state, formAction, isSubmitting] = useActionState(handleFormSubmission, initialValues);

// ...

return  (
   <form action={formAction} ref={formEl}>
     {children}
   </form>
);

解决方案：手动创建临时表单提交 #

当表单验证通过时，我们可以手动构造一个隐藏的临时表单，模拟原生表单的提交行为，绕开useActionState对原生表单的拦截：

function handleFormSubmission(previousState, formData) {
    const newFieldValues = Object.fromEntries(formData);
    const fieldsAreValid = validateFields(newFieldValues , fieldConfig);

    if (fieldsAreValid) {
        // 创建临时表单元素
        const tempForm = document.createElement('form');
        tempForm.action = 'my/results/page';
        tempForm.method = 'POST';
        tempForm.target = '_blank'; // 指定在新标签页打开

        // 将表单字段转为隐藏input添加到临时表单
        Object.entries(newFieldValues).forEach(([name, value]) => {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = name;
            input.value = value;
            tempForm.appendChild(input);
        });

        // 挂载到DOM并提交
        document.body.appendChild(tempForm);
        tempForm.submit();
        // 提交后清理临时表单
        document.body.removeChild(tempForm);
    }

    return newFieldValues;
}

说明 #

• 这种方法完全独立于useActionState的表单拦截逻辑，直接通过原生DOM API模拟表单提交，确保数据以POST方式发送到目标页面，并在新标签页打开结果。
• 原表单组件无需修改action或target属性，保持与useActionState的绑定以处理表单状态更新和验证反馈。

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