修复 Tabs 由于显隐切换导致的数据冲突和active项消失问题
This commit is contained in:
parent
e97c894053
commit
3eca903511
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue