阵营 - 引导 - 如何激活标签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") 
}