在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 (将#修改为@)