如何在react-bootstrap中更改的选项卡上调用事件

Question

我已经在我的React应用程序中使用React-Bootstrap实现了Navigation Tabs。

像这样：

<Tabs defaultActiveKey={1}>
    <Tab eventKey={1} title="Log in">
        {/* Irrelevant code */}
    </Tab>
    <Tab eventKey={1} title="Sign up">
        {/* Irrelevant code */}
    </Tab>
</Tabs>

现在，在更改选项卡上，我想调用以下功能：

changeTab(login) {
    if (login)
        this.setState({ heading: "Log in" })
    else
        this.setState({ heading: "Sign up" })
}

其中login是布尔值，true用于Log in选择选项卡和选择选项卡false时Sign up。

我怎样才能做到这一点？

编辑：

我发现您可以在单击选项卡时像这样调用一个函数：

<Tabs defaultActiveKey={1} onClick={()=>this.changeTab()}>
    <Tab eventKey={1} title="Log in">
        {/* Irrelevant code */}
    </Tab>
    <Tab eventKey={1} title="Sign up">
        {/* Irrelevant code */}
    </Tab>
</Tabs>

但是如何知道单击了哪个选项卡？我需要它基于单击哪个选项卡来更改状态。

Answer 1

我找到了解决方案。您需要onSelect在Tabs组件中使用。

像这样：

<Tabs defaultActiveKey={1} onSelect={this.handleSelect()}>
    <Tab eventKey={1} title="Log in">
        {/* Irrelevant code */}
    </Tab>
    <Tab eventKey={1} title="Sign up">
        {/* Irrelevant code */}
    </Tab>
</Tabs>

然后使它成为您的handleSelect功能：

handleSelect(key) {
    if (key === 1)
        this.setState({ heading: "Log in" })
    else
        this.setState({ heading: "Sign up" })
}