修复 Tabs 由于显隐切换导致的数据冲突和active项消失问题

This commit is contained in:
liaoxuezhi 2019-05-24 14:38:51 +08:00
parent e97c894053
commit 3eca903511
1 changed files with 33 additions and 5 deletions

View File

@ -106,6 +106,35 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
} }
} }
componentDidUpdate() {
const {
tabs,
data
} = this.props;
if (!Array.isArray(tabs)) {
return;
}
const tabIndex = findIndex(tabs, (tab: TabProps, index) =>
tab.hash ? tab.hash === this.state.activeKey : index === this.state.activeKey
);
if (tabs[tabIndex] && !isVisible(tabs[tabIndex], this.props.data)) {
let i = tabIndex - 1;
while (tabs[i]) {
if (isVisible(tabs[i], data)) {
let activeKey = tabs[i].hash || i;
this.setState({
activeKey
})
break;
}
i--;
}
}
}
handleSelect(key: any) { handleSelect(key: any) {
const {env} = this.props; const {env} = this.props;
@ -162,7 +191,6 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
} }
const mode = tabsMode || dMode; const mode = tabsMode || dMode;
const visibleTabs = tabs.filter(tab => isVisible(tab, data));
return ( return (
<TabContainer <TabContainer
@ -179,7 +207,7 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
> >
<div> <div>
<Nav className={cx('Tabs-links')} role="tablist"> <Nav className={cx('Tabs-links')} role="tablist">
{visibleTabs.map((tab, index) => ( {tabs.map((tab, index) => isVisible(tab, data) ? (
<NavItem <NavItem
className={cx('Tabs-link')} className={cx('Tabs-link')}
key={index} key={index}
@ -194,7 +222,7 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
tab.title tab.title
)} )}
</NavItem> </NavItem>
))} ) : null)}
</Nav> </Nav>
<TabContent <TabContent
@ -202,7 +230,7 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
mountOnEnter={mountOnEnter} mountOnEnter={mountOnEnter}
unmountOnExit={unmountOnExit} unmountOnExit={unmountOnExit}
> >
{visibleTabs.map((tab, index) => ( {tabs.map((tab, index) => isVisible(tab, data) ? (
<TabPane <TabPane
key={index} key={index}
eventKey={tab.hash || index} eventKey={tab.hash || index}
@ -213,7 +241,7 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
? tabRender(tab, this.props) ? tabRender(tab, this.props)
: render(`tab/${index}`, tab.tab || tab.body || '')} : render(`tab/${index}`, tab.tab || tab.body || '')}
</TabPane> </TabPane>
))} ) : null)}
</TabContent> </TabContent>
</div> </div>
</TabContainer> </TabContainer>