Question

我对ReactJs有一点问题。我有一个带有多个选项卡的页面，在每个选项卡中我都有一个刷新页面的按钮，所以当我点击刷新按钮时，它返回到选项卡1，同时刷新发生在选项卡2中，而我希望选项卡2在刷新后保持打开状态

我想在刷新标签2保持打开后

示例照片：

刷新前：

刷新后：

我想在刷新标签2保持打开后...

这是我的代码：

＆＃13;

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;

＆＃13;

我提前谢谢你。我继续研究。

真诚的情人

Answer 1

在页面重新加载时，状态将重置为其初始状态。您必须将最后一个选项卡存储在浏览器localStorage或服务器端。

您还需要更新组件以在加载时检索上一个状态。在React的生命周期中，这可能意味着在componentDidMount（）中。

Answer 2

您可以在类中添加状态对象，并在每次组件装载时设置其默认值，以便在浏览器刷新中保存状态，您可以使用localstorage ...

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>

只需刷新选项卡或不刷新页面

2 个答案: