Reagieren-Bootstrap - Wie aktivieren einen Tab außerhalb NavItem

Question

Ich möchte Tab ändern auf dem NavItem evtKey = "x", ohne klicken

Wenn ich einen TabContainer wie dieses:

 <Tab.Container id="tabcontainer" defaultActiveKey="a"> 
      <Tab.Content animation> 
      <Tab.Pane eventKey="a"> 
       <ComponentA /> 
      </Tab.Pane> 
      <Tab.Pane eventKey="b"> 
       <Componentb /> 
      </Tab.Pane> 
      </Tab.Content> 
      <Nav stacked bsStyle="pills" pullLeft> 
      ... NavItems ... 
      </Nav> 
     <Tab.Container> 

Ich möchte zu wissen, wie ich das tun kann:

eventHandler(){ 
     changeToTab("b") 
    } 

innerhalb ComponentA.

Answer 1

Der Registerkartencontainer, ersetzte defaultKey durch activeKey = {this.state.key} und verwaltete den Status des übergeordneten Elements mit einer Funktion, die als Prop an ComponentA übergeben wurde.

auf dem Elternteil der Tab.Container

handleSelect(key){ 
    this.setState({ key : key }) 
} 

render() { 
    ... render stuff ... 

    return (
     <Tab.Container id="tabcontainer" activeKey={this.state.key}> 
      <Tab.Content animation> 
       <Tab.Pane eventKey="a"> 
       <ComponentA changeTab={this.handleSelect}/> 
       </Tab.Pane> 
       <Tab.Pane eventKey="b"> 
       <ComponentB /> 
       </Tab.Pane> 
      </Tab.Content> 
      <Nav stacked bsStyle="pills" pullLeft> 
       ... NavItems ... 
      </Nav> 
     <Tab.Container> 
    ) 
} 

Und auf der Komponente A

eventHandler(){ 
    this.props.changeTab("b") 
}