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

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

class Register extends Component {
    state = { 
        error_msg: "",
        username: "",
        confirm_password: "",
        password: "",
    }; 

    handleClickRegister = e => {
        e.preventDefault();
        if (this.state.username === "") {
            this.setState({error_msg: "用户名不能为空"});
        }else if (this.state.password === "") {
            this.setState({error_msg: "密码不能为空"});
        }else if (this.state.confirm_password === "") {
                this.setState({error_msg: "确认密码不能为空"});
        }else if (this.state.confirm_password !== this.state.password) {
                    this.setState({error_msg: "两次密码输入不一致"});
        }else {
            $.ajax({
                url: "https://app165.acapp.acwing.com.cn/calculator/register/",
                type: "GET",
                data: {
                    username: this.state.username,
                    password: this.state.password,
                    password_confirm: this.state.confirm_password
                },
                dataType: "json",
                success: resp => {
                    if (resp.result === "success") {
                        window.location.href = "/home";
                    }else {
                        this.setState({error_msg: resp.result});
                    }
                }

            });
        }
        console.log(this.state);
    }


    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="mb-3">
                                <label htmlFor="confirm_password" className="form-label">确认密码</label>
                                <input onChange={e => {this.setState({confirm_password: e.target.value})}} type="password" className="form-control" id="confirm_password"/>
                            </div>

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