Next.js13中Radix Alert Dialog通过form属性提交表单失败求助

问题场景 #

在Next.js 13应用中，使用Radix UI Alert Dialog实现联系人删除确认，但红色的"Yes, delete"按钮仅关闭模态框，无法触发关联表单的onSubmit函数。按钮通过form属性绑定外部表单，核心代码结构如下：

DeleteButton组件：

const DeleteButton = React.forwardRef((props, ref) => {
  return (
    <button ref={ref} type="submit" form="edit-form" {...props}>
      Yes, delete
    </button>
  );
});

表单定义：

<form id='edit-form' onSubmit={formSubmitHandler}>
 ...表单内容...
</form>

Alert Dialog组件：

export default function Modal2({
  title,
  description,
  children, 
}) {
  return (
    <AlertDialog.Root>
      <AlertDialog.Trigger asChild>
        {children}
      </AlertDialog.Trigger>
      <AlertDialog.Portal>
        <AlertDialog.Overlay className={styles.overlay} />
        <AlertDialog.Content className={styles.content}>
          <AlertDialog.Title className={styles.title}>
            {title}
          </AlertDialog.Title>
          <AlertDialog.Description className={styles.description}>
            {description}
          </AlertDialog.Description>
          <div className={styles.actions}>
            <AlertDialog.Cancel className={`${styles.button} ${styles.cancel}`}>
              Cancel
            </AlertDialog.Cancel>
            <AlertDialog.Action
              className={`${styles.button} ${styles.action}`}
              asChild
            >
              <DeleteButton></DeleteButton>
            </AlertDialog.Action>
          </div>
        </AlertDialog.Content>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  );
}

问题原因 #

Radix UI的AlertDialog.Action组件在点击时会优先执行模态框关闭的内部逻辑，可能拦截了按钮的submit事件默认行为；同时，模态框内容通过Portal渲染到DOM的独立节点下，跨DOM树的form属性绑定存在浏览器事件处理的兼容性问题。

解决方案 #

方案1：手动触发表单提交

修改DeleteButton，直接控制表单提交逻辑，不再依赖form属性的自动触发：

const DeleteButton = React.forwardRef((props, ref) => {
  const handleClick = (e) => {
    // 触发表单原生submit事件，会触发form的onSubmit
    const form = document.getElementById('edit-form');
    if (form) {
      form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
      // 若不需要表单验证等原生行为，也可直接调用处理函数
      // formSubmitHandler();
    }
    // 保留Radix的模态框关闭逻辑
    if (props.onClick) props.onClick(e);
  };

  return (
    <button ref={ref} type="button" onClick={handleClick} {...props}>
      Yes, delete
    </button>
  );
});

方案2：利用模态框关闭事件提交表单

通过状态标记用户确认状态，在模态框关闭时执行提交：

1. 修改Modal2组件：

import { useState } from 'react';

export default function Modal2({
  title,
  description,
  children, 
}) {
  const [isDeleteConfirmed, setIsDeleteConfirmed] = useState(false);

  const handleModalClose = () => {
    if (isDeleteConfirmed) {
      const form = document.getElementById('edit-form');
      form?.submit();
      // 或直接调用formSubmitHandler();
    }
  };

  return (
    <AlertDialog.Root onClose={handleModalClose}>
      <AlertDialog.Trigger asChild>
        {children}
      </AlertDialog.Trigger>
      <AlertDialog.Portal>
        <AlertDialog.Overlay className={styles.overlay} />
        <AlertDialog.Content className={styles.content}>
          <AlertDialog.Title className={styles.title}>
            {title}
          </AlertDialog.Title>
          <AlertDialog.Description className={styles.description}>
            {description}
          </AlertDialog.Description>
          <div className={styles.actions}>
            <AlertDialog.Cancel className={`${styles.button} ${styles.cancel}`}>
              Cancel
            </AlertDialog.Cancel>
            <AlertDialog.Action
              className={`${styles.button} ${styles.action}`}
              asChild
              onClick={() => setIsDeleteConfirmed(true)}
            >
              <DeleteButton></DeleteButton>
            </AlertDialog.Action>
          </div>
        </AlertDialog.Content>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  );
}

2. 简化DeleteButton：

const DeleteButton = React.forwardRef((props, ref) => {
  return (
    <button ref={ref} type="button" {...props}>
      Yes, delete
    </button>
  );
});

方案3：延迟提交避开Radix事件拦截

若希望保留form属性，可通过延迟执行提交确保Radix关闭逻辑完成：

const DeleteButton = React.forwardRef((props, ref) => {
  const handleClick = () => {
    setTimeout(() => {
      const form = document.getElementById('edit-form');
      form?.submit();
    }, 0);
  };

  return (
    <button ref={ref} type="submit" form="edit-form" onClick={handleClick} {...props}>
      Yes, delete
    </button>
  );
});

推荐方案 #

优先选择方案1或方案2，这两种方式直接控制提交逻辑，避免依赖跨DOM的form属性绑定，兼容性和可靠性更高。

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