實習任務之使用react實現登入獲取動態列表

目錄結構：

Login.css程式碼：

#container{
    width: 400px;
    height: 300px;
    margin: auto;
    border: gray solid 0.5px;
    border-radius: 5px;
}
h2{
    text-align: center;
    margin-top: 50px;
}
#username{
    margin-left: 65px;
    margin-top: 25px;
    
}
#password{
    margin-left: 65px;
    margin-top: 20px;
}

#btn{
    height: 30px;
    width: 270px;
    background-color: #66afe9;
    color: white;
    border-radius: 5px;
    margin-left: 65px;
    margin-top: 20px;

}
input{
    height: 25px;
    width: 200px;
    border-radius: 5px;
}
input:focus{
                border-color: #66afe9;
                outline: 0;
                -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
                box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
        }

Login程式碼：

import React, { Component } from 'react';
import './Login.css';
import Axios from 'axios';
class Login extends Component {
    constructor() {
        super();
        //react定義資料
        this.state = {
            
            username:'',
            password:'',
            users:[],
            isLoaded:false
        }
    }
    inputChange1=(event)=>{
        console.log(event.target.value);
        //this.state.username=24243;
       //把表單輸入的值賦值給username
         this.setState({
             username:event.target.value
         })
    }
    inputChange2=(event)=>{
        console.log(event.target.value);
       //把表單輸入的值賦值給username
        this.setState({
            password:event.target.value
        })
    }
    getInput=()=>{
        const t = this;
        if (this.state.username==111&&this.state.password==111) {
            document.getElementById("container").style.display="none";
            // Axios.get('https://5b5e71c98e9f160014b88cc9.mockapi.io/api/v1/lists').then((response) => {
            //     t.setState({ users:response.data})
            //     console.log(response)
            // }).catch(() => {
            //     console.log('請求失敗');
            // })
            const _this=this;
            Axios.get('https://5b5e71c98e9f160014b88cc9.mockapi.io/api/v1/lists')
            .then(function (response) {
              _this.setState({
                users:response.data,
                isLoaded:true
              });
            })
            .catch(function (error) {
              console.log(error);
              _this.setState({
                isLoaded:false,
                error:error
              })
            })    
            
        } else {
            alert("使用者名稱或密碼錯誤！")
        }
       // alert(this.state.username + this.state.password);
    }
    render() {
        return (
            <div>
            <div id="container">
                <h2>使用者登入</h2>
                <div id="username">使用者名稱：<input  onChange={this.inputChange1} ></input></div>
                <div id="password">密&nbsp;&nbsp;&nbsp;&nbsp;碼：<input  onChange={this.inputChange2} ></input></div>
                <div><button  onClick={this.getInput} id="btn">登陸</button></div>
            </div>
            <table className="table table-bordered">
         
        <tbody>
           <TrData users={this.state.users}/>
        </tbody>
        </table>
            </div>
        )
    }
}

class TrData extends React.Component{
    constructor(props){
      super(props);
    }
    render(){
      return (
        this.props.users.map((user,i)=>{
        return (
            <tr key={user.id} className="text-center">
              <td>{user.id}</td>
              <td>{user.name}</td>
              <td>{user.age}</td>
              <td>{user.sex}</td>
            </tr>
        )       
        
        })
      )
    }
  }
export default Login;

App.js程式碼：

import React, { Component } from 'react';
import './App.css';
import Login from './Login';

class App extends Component {
  constructor(props){
    super(props);
  }
  render() {
    return (
      <div>
      <div className="container">
        <Login />
      </div>
      </div>
    );
  }
}

export default App;

效果圖：