个人中心里面点击'退出登录'没反应?
来源:9-4 清除cookie登录状态
mid_one
2017-12-01

我在user.js里面的logout()处打了个断点。得到了这些

user.js
import React from 'react'
import { connect } from 'react-redux'
import { Result, List, WhiteSpace, Modal } from 'antd-mobile'
import browserCookies from 'browser-cookies'
import { logoutSubmit } from '../../redux/user.redux'
import { Redirect } from 'react-router-dom'
@connect(
state=>state.user,
{logoutSubmit}
)
class User extends React.Component{
constructor(props){
super(props)
this.logout = this.logout.bind(this)
}
logout(){
const alert = Modal.alert
alert('注销', '确认退出登陆吗?', [
{ text: '取消', onPress: () => console.log('cancle') },
{ text: '确认', onPress: () => {
browserCookies.erase('userId')
this.props.logoutSubmit()
}}
])
}
render(){
const props = this.props
const Item = List.Item
const Brief = Item.Brief
console.log('the props is:', props)
return props.user ? (
<div>
<Result
img={<img src={require(`../img/${props.avatar}.png`)} style={{width:50}} alt='' />}
title={props.user}
message={props.type==='hr' ? props.company:null}
/>
<List renderHeader={() => '简介'}>
<Item multipleLine>
{props.title}
{props.desc.split('\n').map(v => <Brief key={v}>{v}</Brief>)}
{props.money ? <Brief>薪资: {props.money}</Brief>:null}
</Item>
</List>
<WhiteSpace></WhiteSpace>
<List>
<Item onClick={this.logout}>退出登录</Item>
</List>
</div>
):<Redirect to={props.redirectTo} />
}
}
export default User写回答
1回答
-
很有可能是css问题。可以检查一下。
原因: navbar 和 tabs 的的高度覆盖了屏幕,也就是覆盖了中间的内容,导致点击不到退出按钮。
修改:
在index.css里面设置如下代码:
.am-navbar{ height: 45px; } .am-tab-bar { height: 50px !important; }说明:
上面两个class是antd组件里定义的,可以网页右键查看源代码找到对应的class。或者你自己定义一个class也是可以的。
因为高度百分百覆盖了内容,所以我们强制设置高度为具体值。数值可以自己定义。navbar和tab组件的实际内容高度是分别是45px和50px。
512017-12-02
Redux+React Router+Node.js全栈开发
全网唯一的React 16+Redux+React Router4实战课程,学到手是你的真本领!
1822 学习 · 750 问题
相似问题
退出功能无法触发
回答 2
登录注册出现卡死报错
回答 1