1

我有 6 个 IonTab，第一个选项卡将您的按钮隐藏为“主页”。其他选项卡正常工作，并有一个返回“主页”（第一个选项卡）的按钮，此按钮重定向到“主页”，但不会更改 IonTabBar DOM 中的道具“selected-tab”。如何在不单击可见 IonTabButtons 之一的情况下更改此道具？

带有标签的组件：

class Main extends React.Component<{}, { active: string, path: string, selected: string }> { 
    constructor(props: any){
        super(props);

        this.state = {
            active: '',
            path: '',
            selected: '',
        };

    }

    componentWillMount(){
        this.setState({ path: '/chat', selected: 'chat' });
        this.forceUpdate();
    }



    render(){
        return (
            <IonApp>
            <IonReactRouter>
                <IonTabs>
                    <IonRouterOutlet>
                        <Route path="/chat" component={Chat} exact={true} /> **MAIN PAGE**
                        <Route path="/contato" component={Contato} exact={true} />
                        <Route path="/recebimento" component={Recebimento} exact={true} />
                        <Route path="/pagamento" component={Pagamento} exact={true} />
                        <Route path="/dashboard" component={Dashboard} exact={true} />
                        <Redirect path="/main" to="/chat" />
                    </IonRouterOutlet>

                    <IonTabBar slot="bottom" current-path={this.state.path} selected-tab={this.state.selected}>
                        <IonTabButton className="d-none bg-tiber" tab="chat" href="/chat">
                        </IonTabButton>
                        <IonTabButton className="bg-tiber" tab="contato" href="/contato">
                        </IonTabButton>
                        <IonTabButton className="bg-tiber" tab="recebimento" href="/recebimento">
                        </IonTabButton>
                        <IonTabButton className="bg-tiber" tab="lara" href="/lara">
                        </IonTabButton>
                        <IonTabButton className="bg-tiber" tab="pagamento" href="/pagamento">
                        </IonTabButton>
                        <IonTabButton className="bg-tiber" tab="dashboard" href="/dashboard">
                        </IonTabButton>
                    </IonTabBar>
                </IonTabs>
            </IonReactRouter>
        </IonApp>
        );
    }
}

仪表板（带有返回按钮的选项卡示例）：

class Dashboard extends React.Component<{}, {goBack: boolean}>{
    constructor(props: any){
        super(props);
        this.state = {
            goBack: false,
        };

        this.voltar = this.voltar.bind(this);
    }

    voltar(){
        this.setState({ goBack: true });
    }

    render(){
        return (
            this.state.goBack === true ? 
            <Redirect to="/main" /> :

            <IonPage>
            <IonHeader>
                <IonToolbar>
                    <div className="d-flex">
                        <button className="btn" onClick={this.voltar}><i className="fas fa-arrow-left" /></button>
                        <IonTitle>Novo Dashboard</IonTitle>
                    </div>
                </IonToolbar>
            </IonHeader>
            <IonContent>

            </IonContent>
            </IonPage>
        );
    }
};

IonTabBar DOM 结果（当我打开一个 Tab 并单击按钮返回时）：

<ion-tab-bar slot="bottom" current-path="/main" selected-tab="dashboard" role="tablist" class="md hydrated">
4

0 回答 0