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”事件

2 个答案: