React表单提交时handleSubmit函数无法触发的问题求助

核心问题原因 #

1. 未全局阻止表单默认提交行为：当前代码仅在表单为空时调用event.preventDefault()，当表单填写完整时，发送fetch请求后未阻止默认提交，页面会立即刷新，导致console.log("Worker")的日志被刷新清空，看起来像是handleSubmit未执行。
2. 输入框属性错误：文本类型input使用min/max属性无效，这类属性仅适用于数字、日期等类型，文本输入框需用minLength/maxLength来限制长度，否则前端长度校验不生效。

修复后的完整代码 #

import React from "react";
import { useState } from "react";
import Button from "./Button";

function Form() {
    const [name, setName] = useState("");
    const [email, setEmail] = useState("");
    const [subject, setSubject] = useState("");
    const [message, setMessage] = useState("");

    function handleSubmit(event) {
        // 优先阻止表单默认提交行为，避免页面刷新
        event.preventDefault();
        console.log("Worker");

        if (name === "" || email === "" || subject === "" || message === "") {
            alert("请填写所有必填字段");
            return;
        }

        fetch("http://localhost:3000/formSubmit", {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ 
                name,
                email,
                subject,
                message
            })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error("请求失败");
            }
            return response.json();
        })
        .then(data => {
            console.log("提交成功", data);
            // 提交成功后重置表单状态
            setName("");
            setEmail("");
            setSubject("");
            setMessage("");
        })
        .catch(error => {
            console.error("提交出错", error);
        });
    }

    return (
        <div id="contact" className="fade-bottom ">
            <div id="form">
                <form id="form-internal" onSubmit={handleSubmit}>
                    <h3 id="form-head">Contact Me!</h3>
                    {/* 修正为minLength/maxLength属性，添加required原生校验 */}
                    <input 
                        className="input-text" 
                        type="text" 
                        minLength={3} 
                        maxLength={50} 
                        size={16} 
                        placeholder="Name" 
                        value={name} 
                        onChange={(e) => setName(e.target.value)} 
                        required
                    />
                    <input 
                        className="input-text" 
                        type="email" {/* 邮箱类型改为email，自带格式校验 */}
                        minLength={8} 
                        maxLength={30} 
                        size={16} 
                        placeholder="Email" 
                        value={email} 
                        onChange={(e) => setEmail(e.target.value)} 
                        required
                    />
                    <input 
                        className="input-text" 
                        type="text" 
                        minLength={1} 
                        maxLength={30} 
                        size={16} 
                        placeholder="Subject" 
                        value={subject} 
                        onChange={(e) => setSubject(e.target.value)} 
                        required
                    />
                    <textarea 
                        id="message" 
                        minLength={1} 
                        maxLength={300} 
                        placeholder="Message" 
                        value={message} 
                        onChange={(e) => setMessage(e.target.value)} 
                        required
                    />
                    <input type="submit" id="submit-form" value="Submit"/> {/* 用value替代placeholder，符合按钮规范 */}
                </form>
            </div>
        </div>
    );
}

export default Form;

关键修复点说明 #

• 强制阻止默认行为：在handleSubmit函数开头就调用event.preventDefault()，彻底避免页面刷新，确保日志和请求都能正常执行。
• 修正输入框属性：将文本输入框的min/max改为minLength/maxLength，邮箱输入框改为type="email"，同时添加required属性，利用HTML5原生校验增强用户体验。
• 完善请求逻辑：添加then/catch处理请求的成功与失败，提交成功后重置表单状态，提升交互体验。
• 规范按钮文本：submit按钮用value属性设置显示文本，而非placeholder，符合HTML标准。

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