在两个输入字段中，一个是只输入一个字母并自动提交表格。为什么？

Question

我正在开发一个 MERN 博客网站项目。在“写帖子”部分有两个输入字段。一个用于标题，另一个用于描述。 当我尝试写一篇文章时，标题可以写完整，但当我尝试写描述时，只需输入一个字母后，表单就会自动提交。

如果我尝试先写描述，它也需要几个单词，但这次标题只需要一个字母，并在我尝试输入第二个字母时自动以 sson 身份提交表单。

我在这里附上我的代码！ 你能帮我解决这个问题吗？

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" onChange={handleSubmit}>
              <div className="writeFormGroup">
                  <label htmlFor="fileInput">
                     <i class="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>
  )
}

Answer 1

在您的表单中，您应该将其：

<form className="writeForm" onChange={handleSubmit}>

更改为：

<form className="writeForm" onSubmit={handleSubmit}>

。 将 onChange 更改为 onSubmit 应该可以解决问题