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

在组件A内部。

- aamadeo

---

我也遇到了这个问题。我想通过点击按钮来更改活动选项卡，但是通过更改状态值无法实现。 - Amit Kumar

Answer 1

被替换为activeKey={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")
}

- aamadeo