英文:
handleSubmit is not defined? what does that mean? whenever I execute white screen is shown. please solve the problem
问题
The code you provided contains JavaScript and JSX, and it seems you're encountering an issue related to the "handleSubmit is not defined" error. This error occurs because the handleSubmit function is defined within the FormData function, but you are trying to use it outside of that scope. To fix this issue, you should define handleSubmit at the outermost level so that it's accessible within the return block. Here's the corrected code:
function Data() {
const [fname, setFname] = useState('');
const [lname, setLname] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post('/server', {
fname,
lname,
});
console.log(response.data)
} catch (error) {
console.error(error);
}
}
return (
<div>
<form onSubmit={handleSubmit}>
<label>
First Name:
<input type="text" value={fname} onChange={(e) => setFname(e.target.value)}></input>
</label>
<label>
Last Name:
<input type="text" value={lname} onChange={(e) => setLname(e.target.value)}></input>
</label>
<button type='submit'>Submit</button>
</form>
</div>
)
}
This code defines handleSubmit at the same level as useState hooks, making it accessible for the form's onSubmit handler.
英文:
handleSubmit is not defined? what does that mean? whenever I execute white screen is shown. please solve the problem. handleSubmit is not defined? what does that mean? whenever I execute white screen is shown. please solve the problem. handleSubmit is not defined? what does that mean? whenever I execute white screen is shown. please solve the problem.
function Data() {
FormData = () => {
const [fname, setFname] = useState('');
const [lname, setLname] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post('/server', {
fname,
lname,
});
console.log(response.data)
} catch (error) {
console.error(error);
}
}
}
return (
< div >
<form onSubmit={handleSubmit}>
<label>
First Name:
<input type="text" value={this.FormData.fname} onChange={(e) => this.FormData.setFname(e.target.value)}></input>
</label>
<label>
Last Name:
<input type="text" value={this.FormData.lname} onChange={(e) => this.FormData.setLname(e.target.value)}></input>
</label>
<button type='submit'>Submit</button>
</form>
</div >
)
}
答案1
得分: 3
你在无法访问return语句的地方添加了handleSubmit。请使用以下代码：
const Data = () => {
const [fname, setFname] = useState('');
const [lname, setLname] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post('/server', {
fname,
lname,
});
console.log(response.data);
} catch (error) {
console.error(error);
}
}
return (
<div>
<form onSubmit={handleSubmit}>
<label>
First Name:
<input type="text" value={fname} onChange={(e) => setFname(e.target.value)}></input>
</label>
<label>
Last Name:
<input type="text" value={lname} onChange={(e) => setLname(e.target.value)}></input>
</label>
<button type='submit'>Submit</button>
</form>
</div>
)
}
英文:
You've added handleSubmit in a place where the return statement cannot access it. Please use this:
const Data = () => {
const [fname, setFname] = useState('');
const [lname, setLname] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post('/server', {
fname,
lname,
});
console.log(response.data)
} catch (error) {
console.error(error);
}
}
return (
< div >
<form onSubmit={handleSubmit}>
<label>
First Name:
<input type="text" value={this.FormData.fname} onChange={(e) => this.FormData.setFname(e.target.value)}></input>
</label>
<label>
Last Name:
<input type="text" value={this.FormData.lname} onChange={(e) => this.FormData.setLname(e.target.value)}></input>
</label>
<button type='submit'>Submit</button>
</form>
</div >
)
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论