I've implemented Navigation Tabs in my React application using React-Bootstrap.
Like this:
<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 function:
changeTab(login) {
if (login)
this.setState({ heading: "Log in" })
else
this.setState({ heading: "Sign up" })
}
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.
How can I do that?
Edit:
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.
onClick
event on Tab, like this:<Tab eventKey={1} title="Log in" onClick={()=>this.changeTab()}>
Tabs
component but then how do I tell which tab is selected?