项目上遇到一个关于Ant Design Tabs标签页问题。
项目背景:用户个人中心包括基本信息、我的钱包、我的订单、消息与通知四个模块(如下左图);需求为该用户提交完订单,跳转到我的订单模块(如下右图),但是项目中个人中心是一个组件,基本信息、我的钱包、我的订单、消息与通知是四个小组件,所以只能调到个人中心组件,且默认跳到基本信息。这是不符合需求的。
为了解决该问题,我先在提交页面跳转时加如下代码,携带id(我的订单);
that.props.history.push({
pathname: '/app/header/Personal',
state: {
id: 3
}
});
在个人中心页面判断,
第一种尝试:然后给defaultActiveKey属性赋值,但是等跳转过去又是在第一项,不知为何,赋值就是不管用。
第二种尝试:然后给activeKey属性赋值,跳转过去确实是第三项,但是切换别的项失败。
第三种尝试:继续第二种尝试,查看文档,发现有onChange事件,每次更改,给activeKey赋值,问题解决。还有一个onTabClick事件,也可以运用。
代码如下:
class Personal extends React.Component {
constructor(props) {
super(props)
this.state = {
tabPosition: 'left',
activeKey: '',
}
};
componentDidMount() {
if (this.props.history.location.state === undefined) {
this.setState({
activeKey: '1'
});
}else{
let state = this.props.history.location.state;
this.setState({
activeKey: state.id+''
});
}
}
callback = (key) => {
this.setState({
activeKey: key
});
}
render() {
const {activeKey} = this.state;
return (
<Tabs onChange={this.callback} style={{marginTop: '16px',paddingTop: '24px'}} activeKey={activeKey} tabPosition={this.state.tabPosition} size="large">
<TabPane tab="基本信息" key="1">
<Basic/>
</TabPane>
<TabPane tab="我的钱包" key="2">
<Wallet/>
</TabPane>
<TabPane tab="我的订单" key="3">
<Order/>
</TabPane>
<TabPane tab="消息与通知" key="4">
<Notice/>
</TabPane>
</Tabs>
);
}
}
export default Personal;