如何使用 div 而不是枢轴按钮 link

Question

我想自定义 PivotItem 以使其可关闭（有点像浏览器标签）。

我提供了一个自定义 onRenderItemLink 实现，它会在选项卡的右侧显示一个 X 图标，并在该图标上显示一个 onClick 方法来关闭该选项卡。

我面临的主要问题是这个 PivotItem 被一个 button 包裹（Pivot.Base.tsx 呈现一个 Commandbutton），拦截所有 onClick 事件Firefox.

Firefox 不允许 Button 下的 onClick 事件（这似乎符合标准，因此不认为是错误），所以我永远无法关闭 Firefox 上的选项卡。

有什么方法可以强制 Fabric UI 在这种情况下创建 div 而不是按钮？

是否有任何其他方法可以在那里强制使用 div（某种方式可以拦截结构 ui 创建的内容并使用 div 切换按钮）？

感谢您的建议。

Answer 1

如果单击右侧的按钮，则最终关闭选项卡

const clickX = clickEvent.pageX;
const buttonRight = clickEvent.currentTarget.offsetLeft + clickEvent.currentTarget.offsetWidth ;
if (buttonRight - clickX <= 40) {
  removeTab(tab);
}