英文:
Among two input fields one is taking just one letter and submit the form automatically. Why?
问题
我正在进行一个MERN博客网站项目的工作。在“写博文”部分有两个输入字段。一个是标题，另一个是描述。
当我尝试写博文时，标题可以完整地输入，但是当我尝试写描述时，只输入一个字母后，表单会自动提交。
如果我先尝试写描述，它也会接受几个单词，但是这次标题只接受一个字母，并在我尝试输入第二个字母时自动提交表单。
我在这里附上了我的代码！
你能帮我解决这个问题吗？
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>
)
}
英文:
I was working on a MERN blog website project. In the Write post section there are two input fields. One is for Title & another is for description.
When I try to write a post the title can be written fully but when I try to write the description the form getting submitted automatically after typing just one letter.
If I try to write the description first it also taking several word but this time the title is taking one letter and submitting the form automatically as sson as I try to type the second letter.
I'm attaching my code here!
Can you please help me to solve this issue?
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>
)
}
答案1
得分: 1
在你的表单中，你应该将这个代码改成：<form className="writeForm" onSubmit={handleSubmit}>，而不是<form className="writeForm" onChange={handleSubmit}>。
将onChange改为onSubmit应该可以解决这个问题。
英文:
In your form, you should change this: <form className="writeForm" onChange={handleSubmit}> to this: <form className="writeForm" onSubmit={handleSubmit}>.
Changing onChange to onSubmit should solve the issue
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论