登录页面。

import React, { useEffect,useState } from 'react'

import axios from 'axios'

import { render } from '@testing-library/react';

import { useHistory } from 'react-router-dom'

 

export default function () {

    const [list,setlist] = useState([]);

    const [username,setusername] = useState('')

    const [password,setpassword] = useState('')

    const [tel,settel] = useState('')

    const history = useHistory()

   

    useEffect(()=>{

        axios.get('./data/user.json').then(({data})=>{

            setlist(data)

        })

    },[])

    // 获取表单中的数据

    const login = () => {

        let foundMatch = false;

        const copylist = [...list]

        copylist.forEach((item) => {

            if(username === item.username && password === item.password && tel === item.tel){

                foundMatch = true

            }

        });

        if (foundMatch){

            sessionStorage.token = '123'

            history.push('/list')

        }else{

            alert('内容不正确')

        }

    }

 

    return (

        <div>

            {/* <form onSubmit={handleSubmit}> */}

                <input type="text" placeholder='请输入用户名' value={username} onChange={(event) => setusername(event.target.value)} />  <br />

                <input type="password" placeholder='请输入密码' value={password} onChange={(event) => setpassword(event.target.value)}   /> <br />

                <input type="text" placeholder='请输入手机号' value={tel} onChange={(event) => settel(event.target.value)} />  <br />

                <button type='submit' onClick={ login }>登录</button>

            {/* </form> */}

        </div>

    )

}