微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

在reactjs中,console.log无法将onSubmit用于表单

如何解决在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 举报,一经查实,本站将立刻删除。