问题描述
我是新来的反应者。提交表单后,请告知为什么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 (将#修改为@)