react+redux仿微信聊天界面(2)

import React, { Component } from 'react'; import { Link } from 'react-router-dom' import { connect } from 'react-redux'; import * as actions from '../../store/action' // 引入wcPop弹窗插件 import { wcPop } from '../../assets/js/wcPop/wcPop.js' class Login extends Component { constructor(props) { super(props) this.state = { tel: '', pwd: '', vcode: '', vcodeText: '获取验证码', disabled: false, time: 0 } } componentDidMount(){ if(this.props.token){ this.props.history.push('https://www.jb51.net/') } } render() { return ( <div className="wcim__lgregWrapper flexbox flex__direction-column"> ...... </div> ) } // 提交表单 handleSubmit = (e) => { e.preventDefault(); var that = this this.state.tel = this.refs.tel.value this.state.pwd = this.refs.pwd.value this.state.vcode = this.refs.vcode.value if (!this.state.tel) { wcPop({ content: '手机号不能为空！', style: 'background:#ff3b30;color:#fff;', time: 2 }); } else if (!checkTel(this.state.tel)) { wcPop({ content: '手机号格式不正确！', style: 'background:#ff3b30;color:#fff;', time: 2 }); } else if (!this.state.pwd) { wcPop({ content: '密码不能为空！', style: 'background:#ff3b30;color:#fff;', time: 2 }); } else if (!this.state.vcode) { wcPop({ content: '验证码不能为空！', style: 'background:#ff3b30;color:#fff;', time: 2 }); } else { // 获取登录之前的页面地址 let redirectUrl = this.props.location.state ? this.props.location.state.from.pathname : 'https://www.jb51.net/' // 设置token this.props.authToken(getToken()) this.props.authUser(this.state.tel) wcPop({ content: '注册成功！', style: 'background:#41b883;color:#fff;', time: 2, end: function () { that.props.history.push(redirectUrl) } }); } } // 60s倒计时 handleVcode = (e) => { e.preventDefault(); this.state.tel = this.refs.tel.value if (!this.state.tel) { wcPop({ content: '手机号不能为空！', style: 'background:#ff3b30;color:#fff;', time: 2 }); } else if (!checkTel(this.state.tel)) { wcPop({ content: '手机号格式不正确！', style: 'background:#ff3b30;color:#fff;', time: 2 }); } else { this.state.time = 60 this.state.disabled = true this.countDown(); } } countDown = (e) => { if(this.state.time > 0){ this.state.time-- this.setState({ vcodeText: '获取验证码(' + this.state.time + ')' }) // setTimeout(this.countDown, 1000); setTimeout(() => { this.countDown() }, 1000); }else{ this.setState({ time: 0, vcodeText: '获取验证码', disabled: false }) } } } const mapStateToProps = (state) => { return { ...state.auth } } export default connect(mapStateToProps, { authToken: actions.setToken, authUser: actions.setUser })(Login)

总结

以上所述是小编给大家介绍的react+redux仿微信聊天界面，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章: