Question

我已经研究了 10 个小时，但很沮丧地说我不知道我错过了什么。

我正在制作一个带有注册和登录功能的简单反应应用程序，我已经成功创建了我的页面，并注册了，这里有两件事我想实现但无法完成：
1.登录后应该调用handleResponseSuccess回调
2.点击按钮应该可以登录成功
即使是简单的指出也会有很大的帮助..谢谢

App.js

import React from "react";
import { Switch, Route, Redirect, withRouter } from "react-router-dom";

import Login from "./pages/Login";
import Signup from "./pages/Signup";
import Mypage from "./pages/Mypage";
import axios from "axios";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.staate = {
      isLogin: false,
    userinfo: null,
    }
    this.handleResponseSuccess = this.handleResponseSuccess.bind(this)
    this.handler = this.handler.bind(this)
  }

  handleResponseSuccess() {
    axios.get('http://localhost:4000/user')
    .then((res) => {
      this.setState({ isLogin: true, userinfo: { ...res.data }, });
      this.props.history.push("/");
    });
  }

  handler() {
    axios.post('https://localhost:4000/signout', null, {
      withCredentials: true,
    })
      .then((res) => {
        this.setState({
          isLogin: false,
        });
        this.props.history.push('/')
      })
      .catch((err) => alter(err));
  }


  render() {
    const { isLogin, userinfo } = this.state;

    return (
      <div>
        <Switch>
          <Route
            path='/login'
            render={() => (
              <Login handleResponseSuccess={this.handleResponseSuccess} />
            )}
          />
          <Route exact path='/signup' render={() => <Signup />} />
          <Route
            exact
            path='/mypage'
            render={() => <Mypage userinfo={userinfo} handleLogout={this.handler}/>}
          />
          <Route
            path='/'
            render={() => {
              if (isLogin) {
                return <Redirect to='/mypage' />;
              }
              return <Redirect to='/login' />;
            }}
          />
        </Switch>
      </div>
    );
  }
}
export default withRouter(App);

login.js

import React from "react";
import { Link, withRouter } from "react-router-dom";
import axios from "axios";

axios.defaults.withCredentials = true;

class Login extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      email: "",
      password: "",
      errorMessage: ""
    };
    this.handleInputValue = this.handleInputValue.bind(this);
    this.handleLogin = this.handleLogin.bind(this)
  }
  handleInputValue = (key) => (e) => {
    this.setState({ [key]: e.target.value });
  };
  handleLogin = () => {
   
    if (this.state.email.length === 0 || this.state.password.length === 0) {
      return this.setState({ errorMessage : "enter email and password"})
    }
    axios.defaults.withCredentials = true;

    axios.post("https://localhost:4000/signin", {
      email: this.state.email,
      password : this.state.password
    }).then(() => {
      this.props.handleResponseSuccess()
    })
  };
  render() {
    return (
      <div>
        <center>
          <h1>Sign In</h1>
          <form onSubmit={(e) => e.preventDefault()}>
            <div>
              <span>email</span>
              <input type='email' onChange={this.handleInputValue("email")}></input>
            </div>
            <div>
              <span>password</span>
              <input type='password' onChange={this.handleInputValue("password")}></input>
            </div>
            <div>
              <Link to='/signup'>no id?</Link>
            </div>
            <button className='btn btn-login' type='submit' onClick={this.handleLogin}>
              log in
            </button>
            {this.state.errorMessage ? <div className="alert-box">{this.state.errorMessage}</div> : null}
          </form>
        </center>
      </div>
    );
  }
}

export default withRouter(Login);

Answer 1

在你的 App.js 代码中

  this.staate = {
      isLogin: false,
    userinfo: null,
    }

而你称之为

   const { isLogin, userinfo } = this.state;

也许这会有所帮助

反应 onChange 功能登录不起作用

1 个答案: