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

tab选项卡，用activeKey = {this.state.key}替换defaultKey，并使用函数管理父级的状态，作为propA传递给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")
}

React-Bootstrap - 如何激活NavItem外的选项卡

1 个答案: