如何解决react形式的onsubmit函数让控制台清零刷新
react 形式的 onsubmit 函数强制控制台清除和刷新,从而使我无法查看日志和分析它们。
我想在我的表单中的提交按钮被点击后在我的控制台上记录一些单词。 但是只要点击按钮,控制台就会刷新,我只能看到一小会儿日志。
这是我的代码:
class App extends React.Component {
constructor() {
super();
this.state = {
username: "",password: "",};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
const {name,value,type,checked} = event.target
type === "checkBox" ? this.setState({ [name]: checked }) : this.setState({ [name]: value })
console.log("changed");
}
handleSubmit() {
console.log("submited");
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<div className="container">
<label htmlFor="username"><b>Username</b></label>
<input
type="text"
value={this.state.username}
placeholder="Enter Username"
name="username"
onChange={this.handleChange}
required>
</input>
<label htmlFor="password"><b>Password</b></label>
<input
type="password"
value={this.state.password}
placeholder="Enter Password"
name="password"
onChange={this.handleChange}
required>
</input>
<button>Login</button>
</div>
</form>
);
}
}
export default App;
谢谢。
解决方法
因为表单是提交表单的原生方式,这是对表单网址的正常页面刷新或操作。你可以
采用
e.preventDefault()
防止这种情况
类似的东西
handleSubmit(e) {
e.preventDefault();
console.log("submited");
}
推迟提交
,见兄弟! form
具有原生默认行为,即在您按 Enter 提交后刷新。因此,我们可以通过包含这个简单的 1 LOC 来防止表单的这种原生行为:
event.preventDefault()
Qn 出现了?在哪里包含它的代码行 (LOC)
ans:在您的 handleSubmit
方法中,传入事件参数,并在开头添加。
像这样:-
handleSubmit(e) {
e.preventDefault();
console.log("submited");
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。