Blazor MudTabs 以编程方式设置活动选项卡

Question

我正在尝试以编程方式设置活动选项卡，但我无法让它工作，这是选项卡定义

<MudTabs Elevation="1" Rounded="true" @ref="tabs">

这是我用来设置活动选项卡的 C# 代码

public required MudTabs tabs;-- defined at the top of code behind

await InvokeAsync(() => tabs.ActivatePanel(5,true));
await InvokeAsync(StateHasChanged);

此处未设置活动选项卡，如果我使用这样的非异步版本

tabs.ActivatePanel(5,true)
await InvokeAsync(StateHasChanged);

我收到此错误

System.InvalidOperationException HResult=0x80131509 消息= 当前线程与 Dispatcher 没有关联。使用 InvokeAsync() 触发时将执行切换到 Dispatcher 渲染或组件状态。 来源=Microsoft.AspNetCore.Components 堆栈跟踪：位于 Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged() 中 /_/src/Components/Components/src/ComponentBase.cs：第 117 行 MudBlazor.MudTabs.d__174.MoveNext() 位于 System.Threading.Tasks.Task.<>c.b__128_1（对象状态）
在 System.Threading.QueueUserWorkItemCallback.Execute() 处 System.Threading.ThreadPoolWorkQueue.Dispatch() 在 System.Threading.PortableThreadPool.WorkerThread.WorkerThreadStart()

有人能看到我在这里做错了什么吗？

（我知道它是从零开始的，选项卡编号是我想显示的正确编号）

Answer 1

有一种更简单的方法来更改活动选项卡，那就是使用

MudTabs.ActivePanelIndex

属性。

例如，

<MudTabs Elevation="0" Outlined="true" @bind-ActivePanelIndex="activeIndex">
    <MudTabPanel Text="Item One" ID='"pn_one"'></MudTabPanel>
    <MudTabPanel Text="Item Two" ID='"pn_two"'></MudTabPanel>
    <MudTabPanel Text="Item Three" ID='"pn_three"'></MudTabPanel>
</MudTabs>
<MudText>@($"Active Index: {activeIndex}")</MudText>

<MudButton Variant="Variant.Filled" OnClick="ChangeTab">Change tabs</MudButton>
@code { 
    int activeIndex = 1;

    void ChangeTab()
    {
        if(activeIndex<2){
            activeIndex++;
        }else{
            activeIndex=0;
        }
    }
}

在这里，我们使用

activeIndex

将其绑定到

@bind-ActivePanelIndex="activeIndex"

字段，现在更改活动选项卡所需要做的就是更改该字段。

演示 👉 MudBlazor 片段