如何在 React-Bootstrap 中捕获选项卡的 'hide.bs.tab' 事件

Question

由于文档 React-Bootstrap 支持选项卡的 onSelect 方法，一旦选项卡切换到另一个选项卡就会触发。我正在寻找类似于原生 Twitter Bootstrap 事件 hide.bs.tab 的东西来确定选项卡开始关闭的时刻。

我找到了一些带有 onExit method 的实用程序，但这对选项卡不起作用，就像我一样。

怎么做？

Answer 1

实际上，onSelect 会在选择另一个选项卡后立即触发（如果您将其作为道具提供），而不是在切换到该选项卡后触发。然后处理程序的工作是切换（或不切换）活动选项卡，也许是在通过线路加载其他信息之后，等等。

React-Bootstrap代码摘录：

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

（取自https://github.com/react-bootstrap/react-bootstrap/blob/44182b72da816b719029355478ef2e7efef522f6/src/Tabs.js#L324）

然后是内置选项卡切换，但前提是您没有提供 onSelect。

例如，您的自定义 onSelect 处理程序可以显示一个微调器，获取进入新选项卡的数据，完成后隐藏微调器并将活动选项卡切换到那个，使用 activeKey 道具

Answer 2

您可以将 onClick 事件附加到导航标签的锚点元素：

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

如何在 React-Bootstrap 中捕获选项卡的 'hide.bs.tab' 事件

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

react-bootstrap