Blazorise中SelectedTabChanged触发两次致标签选中错误

核心问题分析 #

你遇到的重复触发问题，本质是手动赋值selectedTab+调用SelectPanel导致的双向绑定冲突，加上组件初始化时的默认选中逻辑干扰，最终导致第二次触发回退到默认标签。

修复方案 #

以下是经过验证的修复步骤：

1. 使用双向绑定简化联动逻辑
   Blazorise的Tabs和TabsContent支持通过绑定同一个变量实现自动同步，不需要手动调用SelectPanel方法，这能避免手动操作引发的重复触发。

2. 统一初始化选中状态
   确保selectedTab和selectedPanel初始值一致，避免组件加载时的默认选中行为干扰。

3. 移除冗余的手动调用
   删掉OnSelectedTabChanged中对tabsContent.SelectPanel的调用，让双向绑定自动同步面板选中状态。

修改后的完整代码 #

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

<TabsContent @ref="tabsContent" @bind-SelectedPanel="selectedTab">
    <TabPanel Name="FirstTab">
        <!-- 第一个面板内容 -->
    </TabPanel>
    <TabPanel Name="SecondTab">
        <!-- 第二个面板内容 -->
    </TabPanel>
    <TabPanel Name="ThirdTab">
        <!-- 第三个面板内容 -->
    </TabPanel>
</TabsContent>

@code {
    private Tabs tabs = default!;
    private TabsContent tabsContent = default!;
    // 初始化选中状态，避免默认选中第一个标签的干扰
    private string selectedTab = "FirstTab";

    // 如果需要在标签切换时执行额外逻辑，保留这个方法即可
    // 注意：使用@bind-SelectedTab时，会自动更新selectedTab，无需手动赋值
    private void OnSelectedTabChanged(string name)
    {
        // 这里添加标签切换后的额外业务逻辑，比如加载数据等
        // 无需再手动设置selectedTab或调用SelectPanel
    }
}

额外说明 #

• 如果必须保留SelectedTabChanged的手动处理（比如需要执行异步操作），可以改用@bind-SelectedTab:after来监听变化，避免直接修改绑定变量导致的循环触发：

  <Tabs @ref="tabs" @bind-SelectedTab="selectedTab" @bind-SelectedTab:after="OnSelectedTabChanged">
  

• 确保你使用的是Blazorise的最新稳定版本，版本兼容问题仍可能导致类似行为。

内容的提问来源于stack exchange，提问作者Ali Khan