如何阻止第三方React组件中无type属性的<button>触发表单提交？

下面是几种可落地的处理方案，按改造成本和稳定性排序：

方案1：内层嵌套拦截form（最省心，改造成本最低） #

在第三方组件外层套一个无实际作用的空form，拦截内部按钮的提交行为，不会影响外层表单的正常提交：

import React from "react";
import {SamethingComponent} from "samething-package";

export const MyComponent = () => {
    
    const handleSubmit = (e) => {
        // 原有提交逻辑
    }
    return (
        <>
            <form onSubmit={handleSubmit}>
                {/* 套一层空form拦截内部提交 */}
                <form onSubmit={e => e.preventDefault()} style={{display: 'contents'}}>
                    <SamethingComponent/>
                </form>
                <button type="submit">Submit!</button>
            </form>
        </>
    );
};

• 优点：不用修改第三方组件内部逻辑，也不需要监听全局事件，兼容性强
• 说明：display: contents 是为了避免内层form影响原有布局，不会产生额外的样式干扰

方案2：在form提交事件里判断触发源 #

在你的表单提交逻辑里，校验触发提交的元素是不是你自己定义的提交按钮，非目标触发源直接阻止提交：

const handleSubmit = (e) => {
    // 拿到触发提交的元素
    const submitter = e.nativeEvent.submitter;
    // 可通过id、className、文本等唯一标识判断是否为你定义的提交按钮
    if (submitter.tagName === 'BUTTON' && submitter.type === 'submit' && submitter.id === 'my-submit-btn') {
        // 正常执行提交逻辑
        // doSomething
    } else {
        // 非目标提交直接阻止
        e.preventDefault();
    }
}

• 优点：不需要额外新增dom节点，逻辑完全可控
• 说明：建议给你的提交按钮加唯一id作为判断依据，避免文本或其他属性变化导致判断失效

方案3：主动修改第三方组件内部按钮的type属性 #

用useEffect在组件挂载后，找到第三方组件内部的无type按钮，强制把type改成button，从根源解决问题：

import React, {useEffect, useRef} from "react";
import {SamethingComponent} from "samething-package";

export const MyComponent = () => {
    const formRef = useRef(null);
    
    useEffect(() => {
        if (!formRef.current) return;
        // 找到所有未设置type的button
        const noTypeButtons = formRef.current.querySelectorAll('button:not([type])');
        noTypeButtons.forEach(btn => {
            // 过滤掉你自己的提交按钮
            if (btn.id !== 'my-submit-btn') {
                btn.setAttribute('type', 'button');
            }
        })
    }, [])
    
    const handleSubmit = (e) => {
        // 原有提交逻辑
    }
    return (
        <>
            <form ref={formRef} onSubmit={handleSubmit}>
                <SamethingComponent/>
                <button id="my-submit-btn" type="submit">Submit!</button>
            </form>
        </>
    );
};

• 优点：从根源解决默认提交的问题，不会影响组件其他交互逻辑
• 说明：如果第三方组件是动态渲染按钮的话，需要在组件更新的hooks中重新执行修改逻辑

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