Blazorise SelectedTabChanged 方法调用两次，因此最终选择了错误的选项卡

Question

在我的 blazor 服务器项目中，我使用 blazorise UI 库。使用选项卡组件几乎在所有情况下都可以正常工作。然而，以编程方式控制选项卡时，在一些实例中，SelectedTabChanged方法会被调用两次。首先是通过代码调用的实际选项卡，其次是使用默认选项卡本身。 例如，使用 SecondTab 调用 OnSelectedTabChanged 会导致在第二次调用后选择 FirstTab。

以下是我的标记：

<Tabs @ref="@tabs" SelectedTab="@selectedTab" SelectedTabChanged="@OnSelectedTabChanged">
    <Items>
        <Tab Name="FirstTab">First tab</Tab>
        <Tab Name="SecondTab">Second Tab</Tab>
        <Tab Name="ThirdTab">Third tab</Tab>
    </Items>
</Tabs>
<TabsContent @ref="@tabsContent" SelectedPanel="@selectedPanel" SelectedPanelChanged="@OnSelectedPanelChanged">
                <TabPanel Name=FirstTab">
.
.
.
@code
{
    Tabs tabs = default!;
    TabsContent tabsContent = default!;
    void OnSelectedTabChanged(string name)
    {
        selectedTab = name;
        tabsContent.SelectPanel(name);
    }
    void OnSelectedPanelChanged(string name)
    {
        selectedPanel = name;
    }
}

github 上报告了类似的问题，但据他们称已修复。

任何帮助将不胜感激。

Answer 1

我的代码中的问题是我手动调用 tabsContent.SelectPanel(name);最终调用 OnSelectedPanelChanged 和 OnSelectedTabChanged

将代码更改为以下固定它：

<Row>
<Column ColumnSize="ColumnSize.IsAuto.OnDesktop">
  <Tabs @ref="@tabs" @bind-SelectedTab="@selectedTab">
      <Items>
          <Tab Name="FirstTab">First tab</Tab>
          <Tab Name="SecondTab">Second Tab</Tab>
          <Tab Name="ThirdTab">Third tab</Tab>
      </Items>
  </Tabs>
</Column>
</Row>
  <TabsContent @bind-SelectedPanel="@selectedTab>
          <TabPanel Name="FirstTab"></TabPanel>
          <TabPanel Name="SecondTab"></TabPanel>
          <TabPanel Name="ThirdTab"></TabPanel>
.
.
.

@code
{
    public string selectedTab { get; set; }
    Tabs tabs = default!;
    TabsContent tabsContent = default!;
}

通过 selectedTab 变量控制代码中的选项卡就足够了。详细信息请参见创建者的github问题。