Ant Design TreeNode的title内嵌表单提交失效问题咨询

我之前碰到过一模一样的场景，这个问题的核心原因是Ant Design Tree组件会对TreeNode内部的DOM元素做事件拦截或结构转换，导致通过form属性绑定的按钮无法正确触发表单的submit事件——毕竟这种DOM层面的表单绑定依赖完整的事件传递链，而Tree的内部机制刚好打断了这个链条。

下面给你两种可行的解决方案，按需选择：

方案一：重构组件结构（推荐长期维护） #

尽量别在TreeNode的title里放带复杂交互（Modal、表单）的组件，把这类交互组件移到Tree组件外部，TreeNode的title只保留触发交互的按钮：

const App = () => {
  const [compVisible, setCompVisible] = useState(false);
  return (
    <div>
      <Tree>
        <TreeNode key="ert" title={<Button onClick={() => setCompVisible(true)}>Open Modal</Button>} />
      </Tree>
      <Comp visible={compVisible} onClose={() => setCompVisible(false)} />
    </div>
  );
};

然后调整Comp组件，让它接收visible和onClose属性，这样组件完全脱离Tree的上下文，表单提交逻辑就不会受任何干扰了。

方案二：手动触发表单提交（快速修复） #

如果必须把组件放在TreeNode内部，我们可以绕开DOM层面的form属性绑定，直接通过react-hook-form的API手动触发提交：

修改你的Comp组件，调整handleOk逻辑，同时移除okButtonProps的相关配置：

const Comp = () => {
  const { handleSubmit, control } = useForm();
  const [visible, setVisible] = useState(false);

  const showModal = () => {
    setVisible(true);
  };

  // 手动处理Ok按钮的提交逻辑
  const handleOk = async () => {
    try {
      await handleSubmit(onSubmit)();
      setVisible(false); // 验证通过后再关闭Modal
    } catch (e) {
      // 这里可以处理表单验证失败的提示
      console.log("表单验证未通过", e);
    }
  };

  const handleCancel = () => {
    setVisible(false);
  };

  const onSubmit = ({ title }) => {
    console.log(title);
  };

  return (
    <div>
      <Button type="primary" onClick={showModal}>
        Open Modal
      </Button>
      <Modal
        title="Basic Modal"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        // 移除原来的okButtonProps配置
      >
        {useMemo(() => renderForm(handleSubmit, onSubmit, control), [
          control,
          handleSubmit
        ])}
      </Modal>
    </div>
  );
};

关键修改说明： #

1. 删掉Modal的okButtonProps={{ htmlType: "submit", form: "myForm" }}配置，不再依赖DOM层面的表单绑定
2. 把handleOk改成异步函数，手动调用handleSubmit(onSubmit)()——这是react-hook-form官方提供的手动触发提交的方式
3. 只有当表单验证通过（handleSubmit执行成功）时，才关闭Modal，符合正常的交互逻辑

这样修改后，表单的提交逻辑完全由react-hook-form的API控制，不再依赖Tree组件的DOM事件传递，自然就避开了原来的问题。

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