【React】React中设计一个简单的登录操作模板

基本思路

获取input元素中输入的用户名和密码,使用axios发送请求进行匹配，如果用户名和密码正确，则进行路由跳转

使用的库

都使用了目前的最新版本

"react": "^18.1.0",
"react-router-dom": "^6.3.0",
"axios": "^0.27.2"

1.获取input元素中输入的用户名和密码

定义Logout组件
在Logout组件使用useRef() hooks即可

import React, {
   useRef} from 'react';
const Logout = ()=>{
   
    const usernameRef = useRef();
    const passwordRef = useRef();
    
    const handleSubmit = (e)=>{
   
        e.preventDefault();
        const username = usernameRef.current.value;
        const password = passwordRef.current.value;
    }

    return (
        <div>
            <h1>登录界面</h1>
            <form>
                <input ref={
   usernameRef} type='text' placeholder='username'/><br/>
                <input ref={
   passwordRef} type='password' placeholder='password'/><br/>
                <button onClick={
   handleSubmit} type='submit'>登录</button>