-1

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

我发现了一些带有onExit 方法的实用程序的实用程序，但这对标签不起作用，对我来说。

怎么做？

4

2 回答 2

2

实际上，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道具将活动选项卡切换到该选项卡。

于 2015-10-10T14:56:13.310 回答
0

您可以将 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>
于 2020-04-06T11:05:10.010 回答