防止单击NavLink时重新加载TabPane

时间:2019-11-29 00:34:29

标签: reactjs reactstrap

我正在使用reactstrap,并且有一个带有2个标签的元素。

在第一个选项卡上,我可以单击表格中的一行,然后打开第二个选项卡。问题是当我回到第一个选项卡时,它会自动重新加载所有的TabPane(表位于其中)。单击选项卡时如何防止这种重新加载?

这是我的代码:

import React, { Component } from 'react';
import {Col, Nav, NavItem, NavLink, Row, TabContent, TabPane} from 'reactstrap';
import TicketsList from './TicketsList';
import TicketsCard from './TicketsCard';

class Tickets extends Component {
  state = {
    activeTab: "0",
    tabs: [
      {
        tabId: "0",
        name: "Tickets",
        panel: {},
      },
    ],
  };

  toggle = (tab) => {
    this.setState({
      activeTab: tab,
    });
  }

  addTab = (data) => {
    let found = false;
    for (let i=0; i<this.state.tabs.length; i++){
      if (this.state.tabs[i].tabId === data.id) {
        found = true;
      }
    }
    if (found === false) {
      let temp = this.state.tabs.slice();
      temp.push({ tabId: data.id, name: data.user, panel: data });
      this.setState({ tabs: temp });
    }
    this.setState({ activeTab: data.id });
  }

  tabPane = () => {
    for (let i=0; i<this.state.tabs.length; i++){
      if (this.state.tabs[i].tabId === this.state.activeTab) {
        if (this.state.activeTab === "0") {
          return (
            <TabPane tabId="0">
              <TicketsList addTab={this.addTab} />
            </TabPane>
          );
        } else {
          return (
            <TabPane tabId={this.state.tabs[i].tabId}> 
              <TicketsCard data={this.state.tabs[i].panel} />
            </TabPane>
          );
        }
      }
    }
  }

  render() {
    return (
        <div className="animated fadeIn">
          <Row>
            <Col>
              <Nav tabs>
                {this.state.tabs.map(data => (
                  <NavItem key={data.tabId}>
                    <NavLink
                      active={data.tabId === this.state.activeTab}
                      onClick={this.toggle.bind(this, data.tabId)}
                    >
                    {data.name}
                    </NavLink>
                  </NavItem>
                ))}
              </Nav>
              <TabContent activeTab={this.state.activeTab}>
                {this.tabPane()}
              </TabContent>
            </Col>
          </Row>
        </div>
    );
  }
}

export default Tickets;

0 个答案:

没有答案