使用react刷新选项卡

Question

我开始学习反应，我想要刷新标签，而不是整个页面。当我点击刷新按钮时，我预计只会刷新相关标签，而不是页面，所以我想将页面保留在标签2或3而不是标签1上。

刷新前：

刷新后：

以下是代码：

＆＃13;

＆＃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 {
  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">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;

＆＃13;

＆＃13;