只需刷新选项卡或不刷新页面 [英] Just refresh a tab or not the page

问题描述

我对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>

这篇关于只需刷新选项卡或不刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！