我已经在我的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>
Run Code Online (Sandbox Code Playgroud)
现在,在更改选项卡上,我想调用以下功能:
changeTab(login) {
if (login)
this.setState({ heading: "Log in" })
else
this.setState({ heading: "Sign up" })
}
Run Code Online (Sandbox Code Playgroud)
其中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>
Run Code Online (Sandbox Code Playgroud)
但是如何知道单击了哪个选项卡?我需要它基于单击哪个选项卡来更改状态。