ant desgin 登陆实现带接口

╰+攻爆jí腚メ 2021-09-19 19:54 197阅读 0赞

import React, { Component } from 'react';
    import { Form, Icon, Input, Button } from 'antd';
    import './Login.css';
    
    
        class Login extends React.Component {
          constructor(props){
            super(props);
            this.state = {
              userName:'',
              pswd:''
            }
        }
    
        userChange(e){
        this.setState({
          userName:e.target.value,
          })
          // console.log(this.state.userName);
        }
    
        pswdChange(e){
          this.setState({
            pswd:e.target.value,
            })
            // console.log(this.state.pswd);
        }
    
        submitChange(e){
    
          let param= "tel="+this.state.userName+"&paswd="+this.state.pswd;
    
          fetch('http://123.206.254.55/Garaer/garaerServer/index.php/User/login',{
                method: 'POST',
                body: param,
                headers: {
                  'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then(res => res.text()).then(
            data => {
              if(data.user_id){
                console.log(JSON.stringify(data.user_id))
              }
                // console.log(JSON.stringify(data))
            }
            )
        }
    
        render() {
    
          return (
            <div className="login-box">
              <div className="login-box-input">
                <Input
                  className="login-input"
                  prefix={<Icon type="user" style={
       { color: 'rgba(0,0,0,.25)' }} />}
                  placeholder="Username"
                  onChange={this.userChange.bind(this)}
                  defaultValue={this.state.userName}
                  />,
                <Input
                  className="login-input"
                  prefix={<Icon type="lock" style={
       { color: 'rgba(0,0,0,.25)' }} />}
                  type="password"
                  placeholder="Password"
                  onChange={this.pswdChange.bind(this)}
                  defaultValue={this.state.pswd}
                  />
                  <Button className="login-button" type="primary" block
                    onClick={this.submitChange.bind(this)}
                  >
                  登陆
                </Button>
              </div>
            </div>
          );
        }
      }
    
      export default Login;