0

我正在使用 ExtReact TabPanel 组件创建一个具有多个选项卡的应用程序。默认行为似乎是在呈现 TabPanel 期间呈现所有选项卡。但是，我只想仅呈现活动选项卡并仅在第一次单击时呈现（除非用户在选项卡中执行某些操作以要求重新呈现）。我一直在玩监听器和激活事件，但我对控制集不太熟悉，不知道我在做什么。以下是我到目前为止所拥有的，它似乎在激活事件被触发之前选项卡正在呈现，所以不确定这是否是正确的地方。

<TabPanel 
            id="adminTabs"
            flex={1}
            shadow 
            defaults={{
                cls: "card",
                layout: "center"
            }}
            listeners= {{
                scope: this,
                activate: (newActiveItem, tab, oldActiveItem, eOpts) => {
                    //alert(JSON.stringify(newActiveItem.id))
                },
                //activeItemChange: ( sender, value, oldValue, eOpts ) => {
                //    alert(value.id)
                //    alert(oldValue.id)
                //}
            }}
        >
            <Container id="lookupsTab" title="Lookups" layout="center">
                <Container layout="fit" fullscreen><LookupsLanding/></Container>
            </Container>
            <Container title="Configuration" layout="center">
                <Container>Configuration Content</Container>
            </Container>
            <Container id="usersTab" title="Users" layout="center">
                <Container layout="fit" fullscreen><UsersLanding/></Container>
            </Container>
            <Container title="Application Errors" layout="center">
                <Container>Application Errors Content</Container>                
            </Container>
        </TabPanel>
4

2 回答 2

0

我最终通过跟踪组件状态中激活的选项卡来解决这个问题。在 TabPanel.onActiveItemChange 上，我调用了一个函数，该函数将记录单击了哪个选项卡并将其存储在组件状态中，如下所示：

handleTabClick = (sender, value, oldValue, eOpts) => {
    let { activatedTabs } = this.state;
    if (!activatedTabs.includes(value.id)){
        activatedTabs.push(value.id);
        this.setState({ activatedTabs: activatedTabs })
    }
}

然后在我的每个选项卡上，我将它们包装在状态检查中：

render(){
    const { activatedTabs } = this.state;
    ...
    {   activatedTabs.includes("lookupsTab") ? (
           <Container layout="fit" fullscreen><LookupsLanding/</Container>
        ) : null                        
    }
于 2019-03-19T21:09:03.030 回答
0

也许您正在寻找onAfterRender 侦听器：

<Container 
    onAfterRender={{
        single: true, // handler will only be called once
        fn: () => {...} // handler which You are looking for - called once a time after view has been rendered
    }}
    id="lookupsTab" title="Lookups" layout="center">
    <Container layout="fit" fullscreen><LookupsLanding/></Container>
</Container>
于 2019-03-17T00:15:51.920 回答