Блог

Я хочу написать веб-страницу, где есть форма входа в систему. Если имя пользователя и пароль совпадают, мы переходим на другую страницу. В противном случае мы перезагружаемся на ту же страницу.

 import React, { Component } from "react";
import { Redirect } from "react-router-dom";

class Login extends Component {
  constructor(props) {
    super(props);
    let logged = false;
    this.state = {
      username: "",
      password: "",
      logged,

      box: {
        width: "300px",
        margin: "0 auto",
        border: "1px solid blue",
        textAlign: "center",
        verticalAlign: "middle",
        lineHeight: "20px",
        backgroundColor: "white",
      },

      body: {
        backgroundColor: "#ccffff",
        height: `100vh`,
        width: `100vw`,
        display: `flex`,
        alignItems: `center`,
        justifyItems: `center`,
      },
    };
    this.onChange = this.onChange.bind(this);
    this.submitForm = this.submitForm.bind(this);
  }

  onChange(e) {
    this.setState({
      [e.target.name]: e.target.value,
    });
  }

  submitForm(e) {
    e.preventDefault();
    const { username, password } = this.state;
    this.verify();
  }

  verify() {
    if (this.state.username === "A" amp;amp; this.state.password === "hello") {
      console.log("Accepted");
      this.setState({
        logged: true,
      });
    } else {
      console.log("Not accepted");
    }
  }

  getForm() {
    return (
      <form onSubmit={this.submitform}>
        <label for="username">First name:</label>
        <input
          type="text"
          placeholder="Username"
          name="username"
          size="20"
          value={this.state.username}
          style={{ width: "50%", height: "7%" }}
          onChange={this.onChange}
        />
        <br />
        <br />

        <label for="password">Password: </label>
        <input
          type="password"
          placeholder="Password"
          name="password"
          size="15"
          value={this.state.password}
          onChange={this.onChange}
        />
        <br />
        <br />
        <input type="submit"></input>
      </form>
    );
  }

  render() {
    if (this.state.logged) {
      return <Redirect to="/admin" />;
    }

    return (
      <div style={this.state.body}>
        <div style={this.state.box}>
          <br />
          <br />
          {this.getForm()}
          <br />
          <br />
        </div>
      </div>
    );
  }
}

export default Login;
  

В интерфейсной части все работает хорошо. Но что касается аутентификации, элемент управления даже не перейдет в verify() . Пожалуйста, помогите

вы неправильно ввели this.submitForm. проверьте это

  <form onSubmit={this.submitForm}>
  

Проверьте это перед —

 verify() {

   console.log('Fired')


    if (this.state.username === "A" amp;amp; this.state.password === "hello") {
      console.log("Accepted");
      this.setState({
        logged: true,
      });
    } else {
      console.log("Not accepted");
    }
  }