只需刷新选项卡或不刷新页面
我对ReactJ有一点小问题。我有一个具有多个选项卡的页面,在每个选项卡中我都有一个刷新页面的按钮,因此当我单击刷新按钮时,它会返回到选项卡1,而刷新发生在选项卡2中,而我希望选项卡2在刷新后保持打开。
我希望在刷新选项卡%2之后保持打开
图片示例:
刷新前:
刷新后:
我希望在刷新选项卡%2之后保持打开状态...
以下是我的代码:
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">import React, { Component } from 'react';
import { render } from 'react-dom';
import { TabProvider, Tab, TabPanel, TabList } from 'react-web-tabs';
import 'react-web-tabs/dist/react-web-tabs.css';
import { Button } from 'semantic-ui-react'
import 'semantic-ui-css/semantic.min.css';
import './App.css';
class App extends Component {
render() {
return (
<TabProvider defaultTab="vertical-tab-one" vertical>
<section className="my-tabs">
<TabList className="my-tablist">
<Tab tabFor="vertical-tab-one">Tab 1</Tab>
<span className="divider"></span>
<Tab tabFor="vertical-tab-two">Tab 2</Tab>
<span className="divider"></span>
<Tab tabFor="vertical-tab-three" className="my-tab">Tab 3</Tab>
</TabList>
<div className="wrapper">
<TabPanel tabId="vertical-tab-one">
<center>
<Button className="buttonPosition" onClick={myClick}>Refresh tab 1</Button>
</center>
</TabPanel>
<TabPanel tabId="vertical-tab-two">
<center>
<Button className="buttonPosition" onClick={myClick}>Refresh tab 2</Button>
</center>
</TabPanel>
<TabPanel tabId="vertical-tab-three">
<center>
<Button className="buttonPosition" onClick={myClick}>Refresh tab 3</Button>
</center>
</TabPanel>
</div>
</section>
</TabProvider>
);
}
}
function myClick(){
window.location.reload();
}
export default App;
我要提前谢谢你。我继续我的研究。
诚挚的情人节
解决方案
您可以在类中添加状态对象,并在每次挂载组件时设置其默认值,要在浏览器刷新中保存状态,您可以使用本地存储...
class App extends Component {
constructor(props){
super(props);
this.state={
defaultTab: 'vertical-tab-one'
}
}
componentDidMount(){
let default = localStorage.getItem('default');
this.setState(()=>({
defaultTab:default
})
);
}
render(){
return (
<TabProvider
defaultTab={this.state.defaultTab} vertical>
<section className="my-tabs">
<TabList className="my-tablist">
<Tab tabFor="vertical-tab-one">Tab 1</Tab>
<span className="divider"></span>
<Tab tabFor="vertical-tab-two">Tab 2</Tab>
<span className="divider"></span>
<Tab tabFor="vertical-tab-three" className="my-tab">Tab 3</Tab>
</TabList>
相关文章