为何React表单内的Submit按钮无法正常发送数据？

点击表单内的Submit按钮报错，而独立按钮正常，核心原因是表单的submit事件与普通按钮的click事件在浏览器处理逻辑上存在差异，即使调用了event.preventDefault()，仍可能存在隐性干扰。以下是具体解决方法：

方案1：替换表单内的提交按钮类型 #

将表单内的<input type="submit">改为<button type="button">，并绑定onClick事件，让它和独立按钮的触发逻辑完全一致：

return (
    <>
    <button onClick={submit}>Working example</button>
    <form style={cellStyle}>
            
        <div>
            <button 
                type="button"
                onClick={submit}
                className="btn btn-success"
                style={{ margin: "15px 5px 5px 0px" }}
            >
                {reactDict["send"]}
            </button>
        </div>
    </form>
    </>
);

这种方式完全绕开了表单默认的提交机制，确保两次点击的触发逻辑一致，避免浏览器的默认行为干扰。

方案2：优化submit函数的事件处理 #

如果想保留表单的onSubmit逻辑，可以在函数中明确处理事件，确保preventDefault()正确执行，同时移除不必要的冗余代码：

const submit = (event) => {
    // 确保阻止所有可能的默认行为
    if (event) {
        event.preventDefault();
        event.stopPropagation();
    }

    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ test: 'some message' })
    };

    fetch(`neededitems`, requestOptions)
        .then(response => {
            console.log(response);
            // 若需解析响应数据，可添加以下代码
            // return response.json();
        })
        // .then(data => console.log(data))
        .catch(error => {
            console.error('There was an error!', error);
        });
}

额外排查点 #

• 查看浏览器控制台的具体错误信息：如果是请求报错，对比表单提交与独立按钮请求的头信息、参数是否一致；如果是事件报错，确认event对象是否正常传递。
• 验证reactDict["send"]的值是否有效，避免渲染异常影响按钮行为。

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