import React, { Component } from "react";

import { Modal, Button, Input } from "antd";

import "./style.css";

import axios from "axios";

class Login extends Component {

  constructor(props) {

    super(props);

    this.state = {

      login: false,

      modal: false,

      user: "",

      password: "",

    };

    this.handleLogin = this.handleLogin.bind(this);

    this.handleCancel = this.handleCancel.bind(this);

    this.changeUser = this.changeUser.bind(this);

    this.changePassword = this.changePassword.bind(this);

  }

  //   const handleOk = () => {}

  //   handleCancel() {}

  handleLogin() {

    this.setState({

      modal: true,

    });

  }

  handleCancel() {

    this.setState({

      modal: false,

    });

  }

  changeUser(e) {

    this.setState({

      user: e.target.value,

    });

  }

  changePassword(e) {

    this.setState({

      password: e.target.value,

    });

  }

  render() {

    const { login } = this.state;

    return (

      <div className="login">

        {login ? (

          <Button type="primary">退出</Button>

        ) : (

          <Button type="primary" onClick={this.handleLogin}>

            登录

          </Button>

        )}

        <Modal

          title="登录"

          visible={this.state.modal}

          //  onOk={handleOk}

          onCancel={this.handleCancel}

        >

          <Input

            value={this.state.user}

            style={{ marginBottom: 10 }}

            placeholder="请输入用户名"

            onChange="this.changeUser"

          />

          <Input

            value={this.state.password}

            placeholder="请输入密码"

            onChange="this.changePassword"

          />

        </Modal>

      </div>

    );

  }

  componentDidMount() {

    axios.get("http://www.dell-lee.com/react/api/isLogin.json").then((res) => {

      this.setState({

        login: res.data.data.login,

      });

    });

  }

}

export default Login;

----------------------------------------------

​