好客租房移动Web（中）小结

• 地图找房模块：百度地图API，地图覆盖物，CSS Modules解决样式覆盖问题，脚手架环境变量，axios公共URL配置
• 列表找房模块：条件筛选组件封装（变化点），房源列表，react-virtualized（InfiniteLoader，WindowScroller），react-spring动画库
• 房屋详情模块：路由参数（/:id 和 props.match.params），展示房屋详情

登录模块（★★★）

目标

• 能够看懂登录页面的模板结构(/Login/index.js)
• 能够把文本框和密码框设置为受控组件
• 能够给form表单绑定onSubmit事件，取消默认行为
• 能够获取用户名和密码请求服务器，保存token
• 能够说出token的作用

功能分析

• 用户登录
• 我的页面
• 封装路由访问控制组件

用户登录

对应结构:

{/* 顶部导航 */}账号登录{/* 登录表单 */}
{/* 长度为5到8位，只能出现数字、字母、下划线 */}{/* 账号为必填项 */}{/* 长度为5到12位，只能出现数字、字母、下划线 */}{/* 账号为必填项 */}登 录还没有账号，去注册~

功能实现：

• 添加状态：username和password

  state = {username: '',password: ''}

• 使用受控组件方式获取表单元素值

getUserName = e => {this.setState({username: e.target.value})
}getPassword = e => {this.setState({password: e.target.value})
}
render() {const { username, password } = this.statereturn (...{/* 登录表单 */}
{/* 长度为5到8位，只能出现数字、字母、下划线 */}{/* 账号为必填项 */}...)}
}

• 给form表单添加 onSubmit
• 创建方法 handleSubmit，实现表单提交

// 表单提交事件的事件处理程序
handleSubmit = async e => {// 阻止表单提交时的默认行为e.preventDefault()...
}

• 在方法中，通过username和password获取到账号和密码
• 使用API调用登录接口，将username和password作为参数
• 判断返回值status为200时候，表示登录成功
• 登录成功后，将token保存到本地存储中（hkzf_token）
• 返回登录前的页面

// 表单提交事件的事件处理程序
handleSubmit = async e => {// 阻止表单提交时的默认行为e.preventDefault()// 获取账号和密码const { username, password } = this.state// console.log('表单提交了', username, password)// 发送请求const res = await API.post('/user/login', {username,password})console.log('登录结果：', res)const { status, body, description } = res.dataif (status === 200) {// 登录成功localStorage.setItem('hkzf_token', body.token)this.props.history.go(-1)} else {// 登录失败Toast.info(description, 2, null, false)}
}

表单验证说明

• 表单提交前，需要先进性表单验证，验证通过后再提交表单
• 方式一：antd-mobile 组件库的方式（需要InputItem文本输入组件）
• 推荐：使用更通用的 formik，React中专门用来进行表单处理和表单校验的库

formik

目标

• 知道formik的作用
• 能够参照文档来实现简单的表单校验
• 能够给登录功能添加表单校验
• 能够使用formik中提供的组件：Form, Field, ErrorMessage，来对登录模块进行优化

介绍

• Github地址：formik文档
• 场景：表单处理，表单验证
• 优势：轻松处理React中的复杂表单，包括：获取表单元素的值，表单验证和错误信息，处理表单提交，并且将这些内容放在一起统一处理，有利于代码阅读，重构，测试等
• 使用两种方式：1. 高阶组件（withFormik） 2. render-props（ {}} />）

formik来实现表单校验（★★★）

重构

• 安装： yarn add formik
• 导入 withFormik，使用withFormit 高阶组件包裹Login组件
• 为withFormit提供配置对象： mapPropsToValues / handleSubmit
• 在Login组件中，通过props获取到values（表单元素值对象），handleSubmit，handleChange
• 使用values提供的值，设置为表单元素的value，使用handleChange设置为表单元素的onChange
• 使用handleSubmit设置为表单的onSubmit
• 在handleSubmit中，通过values获取到表单元素值
• 在handleSubmit中，完成登录逻辑

// Login组件中
render() {// const { username, password } = this.state// 通过 props 获取高阶组件传递进来的属性const { values, handleSubmit, handleChange } = this.propsreturn ({/* 顶部导航 */}账号登录{/* 登录表单 */}{/* 长度为5到8位，只能出现数字、字母、下划线 */}{/* 账号为必填项 */}{/* 长度为5到12位，只能出现数字、字母、下划线 */}{/* 账号为必填项 */}登 录还没有账号，去注册~)
}// 使用 withFormik 高阶组件包装 Login 组件，为 Login 组件提供属性和方法
Login = withFormik({// 提供状态：mapPropsToValues: () => ({ username: '', password: '' }),// 表单的提交事件handleSubmit: async (values, { props }) => {// 获取账号和密码const { username, password } = values// 发送请求const res = await API.post('/user/login', {username,password})console.log('登录结果：', res)const { status, body, description } = res.dataif (status === 200) {// 登录成功localStorage.setItem('hkzf_token', body.token)// 注意：无法在该方法中，通过 this 来获取到路由信息// 所以，需要通过 第二个对象参数中获取到 props 来使用 propsprops.history.go(-1)} else {// 登录失败Toast.info(description, 2, null, false)}}
})(Login)

两种表单验证方式

• 两种方式

  • 通过validate 配置手动校验

    

  • 通过 validationSchema 配置项配合Yup来校验

    

• 推荐： validationSchema配合Yup的方式进行表单校验

给登录功能添加表单验证

• 安装： yarn add yup （Yup 文档），导入Yup

// 导入Yup
import * as Yup from 'yup'

• 在 withFormik 中添加配置项 validationSchema，使用 Yup 添加表单校验规则

• 在 Login 组件中，通过 props 获取到 errors（错误信息）和 touched（是否访问过，注意：需要给表单元素添加 handleBlur 处理失焦点事件才生效！）
• 在表单元素中通过这两个对象展示表单校验错误信

示例代码：

// 使用 withFormik 高阶组件包装 Login 组件，为 Login 组件提供属性和方法
Login = withFormik({...// 添加表单校验规则validationSchema: Yup.object().shape({username: Yup.string().required('账号为必填项').matches(REG_UNAME, '长度为5到8位，只能出现数字、字母、下划线'),password: Yup.string().required('密码为必填项').matches(REG_PWD, '长度为5到12位，只能出现数字、字母、下划线')}),...
})(Login)

在结构中需要渲染错误信息：

{/* 登录表单 */}
...  用户名的错误提示{errors.username && touched.username && ({errors.username})}... 密码框的错误提示{errors.password && touched.password && ({errors.password})}...

简单处理

• 导入 Form组件，替换form元素，去掉onSubmit

• 导入Field组件，替换input表单元素，去掉onChange，onBlur，value

• 导入 ErrorMessage 组件，替换原来的错误消息逻辑代码

• 去掉所有 props

示例代码：

// 导入withFormik
import { withFormik, Form, Field, ErrorMessage } from 'formik'{/* 账号 */}{/* 密码 */}登 录

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！