reactjs - React-Bootstrap - 如何激活 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

选项卡容器，将 defaultKey 替换为 activeKey={this.state.key}，并使用函数管理父级的状态，作为 prop 传递给组件A.

在 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")
}