react 手把手写一个登录界面，还能从中能学到什么？

需求

作为一个前端码农，对于登录页面和相关业务已经熟烂于心。今天我们一起从登录出发，看我们能学到什么？

提示:下面采用 react+typescirpt+scss 环境书写

结果截图如下

原始做法

从react视角出发，我们可能会在pages文件夹下创建如下结构:

sin-in.component.tsx

import React from 'react'

import './sign-in.style.scss'
export default class SignIn extends React.Component<any, any>{
   
    constructor(props: any) {
   
        super(props);
        this.state = {
   
            email: '',
            password: ''
        }
        this.handleInput = this.handleInput.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this)

    }
    handleInput(e: React.FormEvent) {
   
        const {
    value = '', name = '' } = e.target as any;
        this.setState({
   
            [name]: value
        })
    }
    handleSubmit(e: React.FormEvent) {
   
        e.preventDefault();

        console.log(this.state);
    }
    render() {
   
        const {
    email, password } = this.state;
        return (
            <div className="sign-in">
                <h2>I already have an account</h2>
                <span>Sign in with your email and passowrd</span>

                <form onSubmit={
   this.handleSubmit}>
               	<div className='group'>
                  <input 
                  		className='form-input' 
                   		type="email"
                        name='email'
                        value={
   email}
                        required
                        onChange={
   this.handleInput}
                 />
                  <label
                  	className={
   `${
     value.length?'shrink':''} form-input-label`}
                  >Email</label>