陣營 - 引導 - 如何激活標籤NavItem

Question

外面我想改變標籤不點擊NavItem evtKey =「X」

如果我有這樣一個TabContainer的：

 <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> 

我想知道我該怎麼做：

eventHandler(){ 
     changeToTab("b") 
    } 

裏面的ComponentA。

Answer 1

選項卡容器，將activeKey替換爲default = {this.state.key}，並用函數管理父項的狀態，並將其作爲通道傳遞給ComponentA。

上的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> 
    ) 
} 

家長和在A組份

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