我正在使用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;