如何在react-bootstrap中更改的选项卡上调用事件 [英] How to call an event on tabs changed in react-bootstrap

问题描述

我已经使用 React-Bootstrap 在我的 React 应用程序中实现了导航选项卡.

I've implemented Navigation Tabs in my React application using React-Bootstrap.

像这样:

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

现在更改标签，我想调用以下功能:

Now on changing tabs I would like to call the following funtion:

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

其中 login 是一个布尔值，当 Log in 选项卡被选中且 false 为 true当注册标签被选中时.

Where login is a Boolean that will be true for when the Log in tab is selected and false when the Sign up tab is selected.

我该怎么做?

我发现当标签被点击时你可以调用一个函数，如下所示:

I've figured out that you can call a function on when the tabs are clicked like this:

<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>

但是我怎么知道点击了哪个标签?我需要它根据单击的选项卡更改状态.

But how can I know which tab was clicked? I need it to change the state based on which tab is clicked.

推荐答案

你需要在Tabs组件中使用onSelect.

像这样:

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

然后将其设为您的 handleSelect 函数:

And then make this your handleSelect function:

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

这篇关于如何在react-bootstrap中更改的选项卡上调用事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！