MERN博客发布页面表单自动提交问题求助

问题现象 #

我正在开发一个MERN栈博客网站，发布文章模块包含Title（标题）和description（描述）两个输入字段，出现以下异常：

• 先输入标题时可正常输入完整内容，但输入描述时仅输入一个字符表单就自动提交；
• 先输入描述能输入多个内容，但输入标题时仅输入一个字符，再输入第二个字符时表单就自动提交。

问题原因 #

核心错误是表单事件绑定错误：你给<form>标签绑定了onChange={handleSubmit}，而非正确的onSubmit={handleSubmit}。

onChange事件会在表单内任意输入控件的值发生变化时触发，每输入一个字符就会调用一次handleSubmit函数，导致输入过程中意外触发表单提交逻辑。

修复方案 #

将表单的onChange事件替换为onSubmit事件，仅在点击提交按钮或按回车时触发提交逻辑。

修改后的完整代码 #

import { useContext, useState } from "react"
import "./write.css";
import {Context} from "../../context/Context";
import axios from "axios";

export default function Write() {
    const [title, setTitle] = useState("");
    const [desc, setDesc] = useState("");
    const [file, setFile] = useState(null);
    const { user } = useContext(Context);

    const handleSubmit = async (e) => {
        e.preventDefault();
        const newPost = {
            username: user.username,
            title,
            desc,
        };
        if (file) {
            const data = new FormData();
            const filename = Date.now() + file.name;
            data.append("name", filename);
            data.append("file", file);
            newPost.photo = filename;
            try {
                await axios.post("/upload", data);
            } catch (err) {}
        }
        try {
            const res = await axios.post("/posts", newPost);
            window.location.replace("/post/" + res.data._id);
        } catch (err) {
            
        }
    };
  return (
      <div className="write">
          {file && 
          <img src={URL.createObjectURL(file)} alt="" className="writeImg" />
          }
          <form className="writeForm" onSubmit={handleSubmit}>
              <div className="writeFormGroup">
                  <label htmlFor="fileInput">
                     <i className="writeIcon fa-solid fa-plus"></i>
                  </label>
                  <input type="file" id="fileInput" style={{display:"none"}} onChange={(e)=> setFile(e.target.files[0])} />
                  <input type="text" placeholder="Title" className="writeInput" autoFocus={true} onChange={e=> setTitle(e.target.value)} />
              </div>
              <div className="writeFormGroup">
                  <textarea placeholder="Tell your story..." type="text" className="writeInput writeText" onChange={e=> setDesc(e.target.value)}></textarea>
              </div>
              <button className="writeSubmit" type="submit">Publish</button>
          </form>
      </div>
  )
}

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