50 lines
1.4 KiB
JavaScript
50 lines
1.4 KiB
JavaScript
import React, { useState } from 'react';
|
|
import Button from '@mui/material/Button';
|
|
import TextField from '@mui/material/TextField';
|
|
|
|
import styles from './LoginPage.module.css';
|
|
|
|
export default function () {
|
|
const [username, setUsername] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
|
|
|
|
|
|
const handleInputChange = (event) => {
|
|
const { name, value } = event.target;
|
|
if (name === 'username') setUsername(value);
|
|
if (name === 'password') setPassword(value);
|
|
};
|
|
|
|
const handleSubmit = (event) => {
|
|
event.preventDefault();
|
|
console.log(`Username: ${username}\nPassword: ${password}`);
|
|
};
|
|
|
|
return (
|
|
<form className={styles.form} onSubmit={handleSubmit}>
|
|
<TextField
|
|
name="username"
|
|
label="请输入手机号码"
|
|
variant="outlined"
|
|
value={username}
|
|
onChange={handleInputChange}
|
|
/>
|
|
<TextField
|
|
name="password"
|
|
label="请输入密码"
|
|
type="password"
|
|
variant="outlined"
|
|
value={password}
|
|
onChange={handleInputChange}
|
|
/>
|
|
<Button
|
|
type="submit"
|
|
variant="contained"
|
|
color="primary"
|
|
>
|
|
登录
|
|
</Button>
|
|
</form>
|
|
);
|
|
} |