AntDesign(React)学习-4 登录页面提交数据简单实现

Z时代
2024-01-10
分类：综合

react

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="请输入用户名" >this.handleUserNameChange}/></td>
          </tr>
          <tr>
          <td>密码:</td>
          <td><Input.Password placeholder="请输入密码" >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="请输入用户名"  style={{width:200}}/></td>
        </tr>
        <tr>
        <td>密码:</td>
        <td><Input.Password placeholder="请输入密码"  style={{width:200}}/></td>
        </tr>
        </tbody>
      </table>
      <Button type="primary" style={{marginTop:10,width:300}} onClick={()=>(LOGIN.login())}>登录</Button>
    </div>
  );
}