如何解决在reactjs中,console.log无法将onSubmit用于表单
我是新来的反应者。提交表单后,请告知为什么console.log()没有显示在控制台上。
在handleSubmit函数e.preventDefault()
和this.setState({ errors })
中,执行正常,但控制台日志未执行。
请在下面的代码中告知我在做什么。
反应版本:16.14.0 Windows操作系统
import React,{ Component } from "react";
import Input from "./common/input";
class LoginForm extends Component {
constructor(props) {
super(props);
this.state = {
account: {
username: "",password: "",},errors: {},};
}
handleChange = ({ currentTarget: input }) => {
const account = { ...this.state.account };
account[input.name] = input.value;
this.setState({ account: account });
};
validate = () => {
const errors = {};
const { account } = this.state;
if (account.username.trim() === "")
errors.username = "Username is required";
if (account.password.trim() === "")
errors.password = "Password is required";
return Object.keys(errors).length === 0 ? null : errors;
};
handleSubmit = (e) => {
e.preventDefault();
const errors = this.validate();
console.log(errors); // If errors it is not showing anything on console
this.setState({ errors });
if (errors) return;
console.log("Submitted"); // if no errors this message should show on console but its not
};
render() {
const { account } = this.state;
return (
<div>
<h3>LoginForm</h3>
<form onSubmit={this.handleSubmit}>
<Input
name="username"
value={account.username}
onChange={this.handleChange}
Label="Username"
/>
<Input
name="password"
value={account.password}
onChange={this.handleChange}
Label="Password"
/>
<button type="submit" className="btn btn-primary">
Login
</button>
</form>
</div>
);
}
}
export default LoginForm;
编辑: 我在另一个应用程序及其工作中使用了完全相同的代码。 还请就需要查找的任何特定应用设置提供建议吗?
代码编辑器:Visual Studio 浏览器:Chrome
谢谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。