Just refresh a tab or not the page

问题

I'm having a little problem with ReactJs. I have a page with several tabs and in each tabs I have a button that refresh the page so when I click on the refresh button it goes back to tab 1 while the refresh happens in tab 2 while I want tab 2 to remain open after refresh.

I want after the refresh tab 2 stays open

Example photo:

Before refresh:

After refresh:

I want after the refresh tab 2 stays open...

Here is my code:

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;

I thank you in advance. I continue my research.

Sincerely Valentine

回答1:

On a page reload the state will reset to it's initial state. You either have to store the last tab in the browsers localStorage or on the server side.

You also need to update your component to retrieve the last state when loading. In the life cycle of React this probably means inside componentDidMount().

回答2:

You can add the state object in your class, and set its default every time the component is mount, to save the state in a browser refresh you can use 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>

来源：https://stackoverflow.com/questions/48807295/just-refresh-a-tab-or-not-the-page