AntDesign(React)學習-4 登錄頁面提交數據簡單實現

github代碼：https://github.com/zhaogaojian/jgdemo

全國肺炎，過節期間沒地方去在家學習antd。

一、感覺antd pro項目太龐大了，可以學習下結構和代碼風格，但不適合新手直接學習測試語法用，將從一個空白項目開始創建

1、打開umi管理后台，創建一個新項目

 

 

 

 2、umi會自動安裝各種依賴項，進行項目創建

 

 3、項目結構如下，將仿照antd做一個登錄頁面

 

二、實現登錄頁面

創建了不包含antd演示的jgdemo項目，以后改使用vscode編輯代碼,創建user,login目錄

 

 

 2、點擊start可以直接啟動項目

 

 

 3、安裝antd組件

 

 

 4、antd官網

https://ant.design/docs/react/introduce-cn

螞蟻金服的技術網站，在老家破網打開速度特別慢！

修改index.tsx代碼如下

 

 

 運行效果如下

 

 

 

5、為了省事，直接在index上做登錄了，增加兩個input輸入框,最終tsx代碼如下。

import React from 'react';
import styles from './index.css';
import { Button,Input } from 'antd';
export default function() {
  return (
    <div className={styles.normal}>
      <table style={{margin:"0 auto",width:300}}>
        <tr>
        <td>用戶名:</td>
        <td><Input placeholder="請輸入用戶名" style={{width:200}}/></td>
        </tr>
        <tr>
        <td>密碼:</td>
        <td><Input.Password placeholder="請輸入密碼" style={{width:200}}/></td>
        </tr>
      </table>
      <Button type="primary" style={{marginTop:10,width:300}}>登錄</Button>
    </div>
  );
}

注意不能直接寫style="width:200px",margin后面要加雙引號

運行效果如下

 6、網上一般的寫法是使用組件，index.tsx代碼繼續完善，

mock下增加一個login.ts文件，模擬post數據

import { Request, Response } from 'express';
export default {
    'POST /api/login': (req: Request, res: Response) => {
        res.send({ status: 'ok', token: '121131323' });
      },
  };

提交數據代碼如下

import React from 'react';
import styles from './index.css';
import Link from 'umi/link';
import { Button,Input} from 'antd';
import Password from 'antd/lib/input/Password';
class index extends React.Component{ 
  constructor(props) {
    super(props);
    this.state={
      userName:'test',
      passWord:'123456'
    }
  }
  state:{
    userName,
    passWord
  }
  login(){
    var userName = this.state.userName;
    var passWord = this.state.passWord;
    const postData ={
      userName:userName,
      passWord:passWord
    };
    console.log(postData);
    fetch('http://localhost:8000/api/login',{
            // post提交
            method:"POST",
            headers:{
                "Content-type":"application/json"
            },
            body:JSON.stringify(postData)//把提交的內容轉字符串
        })
        .then(res =>res.json())
        .then(data =>{
            console.log(data)
        })
  };
  handleUserNameChange=(event)=>{
    this.setState({userName: event.target.value});
    console.log(this.state.userName);
  }
  handlePassWordChange(event){
    //this.state.passWord=event.target.value;//錯誤用法，這樣passWord value不會更新
    this.setState({passWord: event.target.value});
  }
  render() {
    return (
      <div className={styles.normal}>
        <table style={{margin:"0 auto",width:300}}>
          <tbody>
          <tr>
          <td>用戶名:</td>
          <td><Input placeholder="請輸入用戶名" id="userName" value={this.state.userName} style={{width:200}} onChange={this.handleUserNameChange}/></td>
          </tr>
          <tr>
          <td>密碼:</td>
          <td><Input.Password placeholder="請輸入密碼" id="passWord"  value={this.state.passWord} style={{width:200}} onChange={this.handlePassWordChange.bind(this)}/></td>
          </tr>
          </tbody>
        </table>
        <Button type="primary" style={{marginTop:10,width:300}} onClick={()=>(this.login())}>登錄</Button>
      </div>
    );
  }
}
export default index;

 為什么使用bind(this)

以下bind(this)講解來自：https://blog.csdn.net/qq_34829447/article/details/81705977

1.JavaScript自身特性說明
如果傳遞一個函數名給一個變量，之后通過函數名()的方式進行調用，在方法內部如果使用this則this的指向會丟失。
示例代碼：
首先我們創建test對象並直接調用方法 ：

const test = {
    name:'jack',
    getName:function(){
        console.log(this.name)
    }
}
test.getName()
使用node test.js執行上述代碼可以正常輸出jack。 
之后，我們對代碼進行調整：

const test = {
    name:'jack',
    getJack:function(){
        console.log(this.name)
    }
}
const func = test.getJack;
func();

我們沒有直接調用對象的方法，而是將方法聲明給一個中間變量，之后利用中間變量()調用方法，此時this則失去指向，輸出undefined，如果使用node環境執行js文件則輸出node相關信息，如嵌入到html中則this指向window對象
React中的bind同上方原理一致,在JSX中傳遞的事件不是一個字符串，而是一個函數（如:onClick={this.handleClick}），此時onClick即是中間變量，所以處理函數中的this指向會丟失。解決這個問題就是給調用函數時bind(this)，
從而使得無論事件處理函數如何傳遞，this指向都是當前實例化對象。 
當然，如果不想使用bind(this)，我們可以在聲明函數時使用箭頭函數將函數內容返回給一個變量，並在調用時直接使用this.變量名即可

 

7、在React中也可以使用getElementById方式獲取數據（實際開發中盡量不要使用這種方式）。

import React from 'react';
import styles from './index.css';
import { Button,Input } from 'antd';
export const LOGIN = {
  login:function(){
    var userName = (document.getElementById('userName') as HTMLInputElement)?.value;
    var passWord = (document.getElementById('passWord') as HTMLInputElement)?.value;
    const postData ={
      userName:userName,
      passWord:passWord
    };
    fetch('http://localhost:8000/api/login',{
            // post提交
            method:"POST",
            headers:{
                "Content-type":"application/json"
            },
            body:JSON.stringify(postData)//把提交的內容轉字符串
        })
        .then(res =>res.json())
        .then(data =>{
            console.log(data)
        })
  }
};
export default function() {
  return (
    <div className={styles.normal}>
      <table style={{margin:"0 auto",width:300}}>
        <tbody>
        <tr>
        <td>用戶名:</td>
        <td><Input placeholder="請輸入用戶名" id="userName" style={{width:200}}/></td>
        </tr>
        <tr>
        <td>密碼:</td>
        <td><Input.Password placeholder="請輸入密碼" id="passWord" style={{width:200}}/></td>
        </tr>
        </tbody>
      </table>
      <Button type="primary" style={{marginTop:10,width:300}} onClick={()=>(LOGIN.login())}>登錄</Button>
    </div>
  );
}

這樣，點擊登錄按鈕即可post數據到服務端后台