卡比记账项目——登陆界面登陆界面新增有关于登陆的路由创建组件 SignInPage.tsx作为我们的登陆界面在Ma

新增有关于登陆的路由

创建组件 SignInPage.tsx作为我们的登陆界面

截屏2022-10-27 12.54.50.png

在MainLayout中添加基础样式

截屏2022-10-27 12.55.24.png 预览：

截屏2022-10-27 12.55.43.png

由于验证码需要两个input 所以我们在FormItem组件中再封装一个验证码的type

截屏2022-10-27 12.58.30.png 并返回input和button 截屏2022-10-27 13.07.37.png

截屏2022-10-27 13.07.58.png

截屏2022-10-27 13.09.36.png 给FormItem绑定上formDate和error

截屏2022-10-27 13.11.39.png 下面的验证码同理

截屏2022-10-27 13.12.48.png

如果error为空要现实一个中文的站位符

所以回到Form.tsx 在封装时就添加这一点

截屏2022-10-27 13.19.02.png

给Form标签添加一个onSubmit的事件监听，

<Form onSubmit={onSubmit}>

onSubmit的具体内容：截屏2022-10-27 13.22.53.png **首先阻止默认事件随后将errors清空，使用Object.assign() 清空之后调用validate

props里接受一个placeholder，是字符串截屏2022-10-27 13.58.29.png input里面可以使用placeholder

截屏2022-10-27 13.59.07.png

截屏2022-10-27 13.59.45.png