如何将字符串化表单转回可提交形式？解决submit非函数报错

问题场景 #

需要在用户提交后展示感谢/处理提示页面的同时，自动提交后端传来的字符串化HTML表单。尝试JSON.parse解析失败，用DOMParser转换后不知如何提交；使用useEffect调用form.submit()时触发报错：Uncaught TypeError: form.submit is not a function，且业务要求不能先提交再跳转页面。

报错原因 #

传入的form prop是字符串格式的HTML代码或React虚拟元素，并非浏览器真实DOM节点，而submit()是真实DOM表单元素独有的方法，因此调用失败。

解决方法 #

方法一：用DOMParser解析表单并添加到页面提交 #

通过DOMParser将字符串表单转换为真实DOM节点，添加到页面后调用submit()方法：

import React, { useEffect } from 'react';

const ProcessingOrder = ({ form }) => {
  useEffect(() => {
    if (!form) return;
    
    // 解析字符串化的HTML表单
    const parser = new DOMParser();
    const doc = parser.parseFromString(form, 'text/html');
    const formElement = doc.querySelector('form');
    
    if (formElement) {
      // 隐藏表单避免影响页面展示
      formElement.style.display = 'none';
      // 将表单添加到页面body
      document.body.appendChild(formElement);
      // 执行提交
      formElement.submit();
      // 提交后可移除表单（可选）
      setTimeout(() => {
        document.body.removeChild(formElement);
      }, 1000);
    }
  }, [form]);

  return (
    <div>
      <p className="title">Thank you!</p>
      <p className="text">
        We're processing your order now...
      </p>
    </div>
  );
};

export default ProcessingOrder;

方法二：通过ref获取渲染后的真实表单DOM #

使用dangerouslySetInnerHTML渲染字符串表单，再通过ref获取真实DOM节点提交：

import React, { useEffect, useRef } from 'react';

const ProcessingOrder = ({ form }) => {
  const formContainerRef = useRef(null);

  useEffect(() => {
    const formElement = formContainerRef.current?.querySelector('form');
    if (formElement) {
      formElement.submit();
    }
  }, [form]);

  return (
    <div>
      <p className="title">Thank you!</p>
      <p className="text">
        We're processing your order now...
      </p>
      {/* 渲染隐藏的表单容器 */}
      <div 
        ref={formContainerRef} 
        dangerouslySetInnerHTML={{ __html: form }} 
        style={{ display: 'none' }}
      />
    </div>
  );
};

export default ProcessingOrder;

注意事项 #

• 确保后端传来的字符串表单包含合法的action和method属性，否则提交会失败。
• 使用dangerouslySetInnerHTML时需确认表单内容安全，避免XSS攻击风险。

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