react_demo/calc/src/components/content/login.jsx

import React, { Component } from 'react';
import Base from './base';
import $ from 'jquery';

class Login extends Component {
    state = {
         error_msg: "",
         username: "",
         password: "",
    } 

    handleClickLogin = e => {
        e.preventDefault();
        if (this.state.username === "") {
            this.setState({error_msg: "用户名不能为空"});
        }else if (this.state.password === "") {
            this.setState({error_msg: "密码不能为空"});
        }else {
            $.ajax({
                url: "https://app165.acapp.acwing.com.cn/calculator/login/",
                type: "GET",
                data: {
                    username: this.state.username,
                    password: this.state.password,
                },
                dataType: "json",
                success: resp => {
                    if (resp.result === "success") {
                        window.location.href = "/home";
                    }else {
                        this.setState({error_msg: resp.result});
                    }
                }

            });

        }
    }
    render() { 
        return (
            <Base>
                <div className="container">
                    <div className="row justify-content-md-center">
                        <div className="col col-sm-3">
                        <form>
                            <div className="mb-3">
                                <label htmlFor="username" className="form-label">用户名</label>
                                <input onChange={e => {this.setState({username: e.target.value})}} type="email" className="form-control" id="username" aria-describedby="emailHelp"/>
                            </div>
                            <div className="mb-3">
                                <label htmlFor="password" className="form-label">密码</label>
                                <input onChange={e => {this.setState({password: e.target.value})}} type="password" className="form-control" id="password"/>
                            </div>

                            <div className='error_msg' style={{marginTop: "1rem",marginBottom:"1rem",color:"red", fontWeight: "bold"}}>
                                {this.state.error_msg}
                            </div>
                            <button onClick={this.handleClickLogin} type="submit" className="btn btn-primary" style={{width:"100%"}}>登录</button>
                            </form>
                        </div>
                    </div>
                </div>
            </Base>
        );
    }
}
 
export default Login;