英文:
Form not submitting properly using Reactjs
问题
我正在使用Reacjs/nextjs，目前我正在尝试提交"登录表单"，我能够弹出警告，但页面也重新加载了，我只想要页面不重新加载，我错在哪里？以下是我的当前代码在 "index.tsx" 文件中：
import React from 'react';
import axios from 'axios';
const LoginForm = () => {
const [formValue, setformValue] = React.useState({
email: '',
password: ''
});
const handleSubmit = (event) => {
alert("它正在工作");
// 我们将在下一段中填充这部分
}
const handleChange = (event) => {
setformValue({
...formValue,
[event.target.name]: event.target.value
});
}
return (
<form onSubmit={handleSubmit}>
<p>登录表单</p>
<input
type="email"
name="email"
placeholder="输入电子邮件"
value={formValue.email}
onChange={handleChange}
/>
<input
type="password"
name="password"
placeholder="输入密码"
value={formValue.password}
onChange={handleChange}
/>
<button
type="submit"
>
登录
</button>
</form>
)
};
export default LoginForm;
希望这有帮助。
英文:
I am working with Reacjs/nextjs,Right now i am trying to submit "login form" i am getting alert but page is also reloading,I just want page should not reload,Where i am wrong ? Here is my current code in "index.tsx"
import React from 'react';
import axios from 'axios';
const LoginForm = () => {
const [formValue, setformValue] = React.useState({
email: '',
password: ''
});
const handleSubmit = (event) => {
alert("its workinggg");
// we will fill this in the coming paragraph
}
const handleChange = (event) => {
setformValue({
...formValue,
[event.target.name]: event.target.value
});
}
return (
<form onSubmit={handleSubmit}>
<p>Login Form</p>
<input
type="email"
name="email"
placeholder="enter an email"
value={formValue.email}
onChange={handleChange}
/>
<input
type="password"
name="password"
placeholder="enter a password"
value={formValue.password}
onChange={handleChange}
/>
<button
type="submit"
>
Login
</button>
</form>
)
};
export default LoginForm;
答案1
得分: 1
使用 preventDefault 方法来阻止默认重新加载。
它适用于所有具有默认操作的事件。
const LoginForm = () => {
const [formValue, setformValue] = React.useState({
email: '',
password: ''
});
const handleSubmit = (event) => {
event.preventDefault() // <----- 在这里
alert("它正在工作");
// 我们将在接下来的段落中填写这部分内容
}
const handleChange = (event) => {
setformValue({
...formValue,
[event.target.name]: event.target.value
});
}
return (
<form onSubmit={handleSubmit}>
<p>登录表单</p>
<input
type="email"
name="email"
placeholder="输入电子邮件"
value={formValue.email}
onChange={handleChange}
/>
<input
type="password"
name="password"
placeholder="输入密码"
value={formValue.password}
onChange={handleChange}
/>
<button
type="submit"
>
登录
</button>
</form>
)
};
英文:
Use preventDefault method to prevent default reload.
It works with all events which have default action.
const LoginForm = () => {
const [formValue, setformValue] = React.useState({
email: '',
password: ''
});
const handleSubmit = (event) => {
event.preventDefault() // <----- HERE
alert("its workinggg");
// we will fill this in the coming paragraph
}
const handleChange = (event) => {
setformValue({
...formValue,
[event.target.name]: event.target.value
});
}
return (
<form onSubmit={handleSubmit}>
<p>Login Form</p>
<input
type="email"
name="email"
placeholder="enter an email"
value={formValue.email}
onChange={handleChange}
/>
<input
type="password"
name="password"
placeholder="enter a password"
value={formValue.password}
onChange={handleChange}
/>
<button
type="submit"
>
Login
</button>
</form>
)
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论