How to call an event on tabs changed in react-bootstrap

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.

You need to use onSelect in the Tabs component.

Like this:

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

And then make this your handleSelect function:

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

For multiple handlers you can do this:

handleSelect(key) {
  {
    1: this.setState({ heading: "Log in" }),
    2: this.setState({ heading: "Sign up" }),
    3: this.setState({ heading: "Something Else" }),
  }[key]
}