title: How to call an event on tabs changed in react-bootstrap
body: <p>I've implemented Navigation Tabs in my React application using React-Bootstrap.</p>
  
  <p>Like this:</p>
  
  <pre><code>&lt;Tabs defaultActiveKey={1}&gt;
      &lt;Tab eventKey={1} title="Log in"&gt;
          {/* Irrelevant code */}
      &lt;/Tab&gt;
      &lt;Tab eventKey={2} title="Sign up"&gt;
          {/* Irrelevant code */}
      &lt;/Tab&gt;
  &lt;/Tabs&gt;
  </code></pre>
  
  <p>Now on changing tabs I would like to call the following funtion:</p>
  
  <pre><code>changeTab(login) {
      if (login)
          this.setState({ heading: "Log in" })
      else
          this.setState({ heading: "Sign up" })
  }
  </code></pre>
  
  <p>Where <code>login</code> is a Boolean that will be <code>true</code> for when the <code>Log in</code> tab is selected and <code>false</code> when the <code>Sign up</code> tab is selected.</p>
  
  <p>How can I do that?</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>I've figured out that you can call a function on when the tabs are clicked like this:</p>
  
  <pre><code>&lt;Tabs defaultActiveKey={1} onClick={()=&gt;this.changeTab()}&gt;
      &lt;Tab eventKey={1} title="Log in"&gt;
          {/* Irrelevant code */}
      &lt;/Tab&gt;
      &lt;Tab eventKey={1} title="Sign up"&gt;
          {/* Irrelevant code */}
      &lt;/Tab&gt;
  &lt;/Tabs&gt;
  </code></pre>
  
  <p>But how can I know which tab was clicked? I need it to change the state based on which tab is clicked.</p>