需求
作为一个前端码农,对于登录页面和相关业务已经熟烂于心。今天我们一起从登录出发,看我们能学到什么?
提示:下面采用 react+typescirpt+scss
环境书写
结果截图如下
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190813100911927.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9jY3dncy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70)
原始做法
从react视角出发,我们可能会在pages
文件夹下创建如下结构:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190813101042425.png)
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