Twitter Bootstrap Question posted in

Twitter bootstrap – How to catch 'hide.bs.tab' event for tabs in React-Bootstrap

Due to docs React-Bootstrap supports onSelect method for tabs which fires once tab switch to another tab.
I looking for something similar to native Twitter Bootstrap event hide.bs.tab to determine moment when tab starts closing.

I found some utilities with onExit method, but that doesn’t work for tabs, as for me.

How to do that?

Tags:

2

Answers


  1. 0

    Actually, onSelect fires (if you provided it as a prop) as soon as another tab is selected, not after it is switched to. It is then that handler’s job to switch the active tab (or not), perhaps after loading additional information through the wire, and so on.

    An excerpt from the React-Bootstrap code:

    if (this.props.onSelect) {
  this._isChanging = true;
  this.props.onSelect(selectedKey);
  this._isChanging = false;
  return;
}

    (taken from https://github.com/react-bootstrap/react-bootstrap/blob/44182b72da816b719029355478ef2e7efef522f6/src/Tabs.js#L324)

    Then followed by the built-in tab switching but only if you hadn’t provided onSelect.

    For example, your custom onSelect handler could display a spinner, fetch data that goes in the new tab, and once that’s done hide the spinner and switch the active tab to that one, using the activeKey prop.

    Login or Signup to reply.
  2. 0

    You can attach an onClick event to the anchor element of your nav-tabs:

    <ul className="nav nav-tabs">
  <li className="nav-item">
    <a className="nav-link active" data-toggle="tab" href="#tabOne" role="tab" onClick={this.handleTabChange}>Tab One</a>
  </li>
  <li className="nav-item">
    <a className="nav-link active" data-toggle="tab" href="#tabTwo" role="tab" onClick={this.handleTabChange}>Tab Two</a>
  </li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search