Blazor StateHasChanged 未按预期工作

Question

我使用布尔属性在用户单击按钮后禁用该按钮，以便单击不会发生两次。

 private bool DisablePlaceOrderButton { get; set; } = false;
 private void PlaceOrder_Clicked()
    {
        DisablePlaceOrderButton = true;
        StateHasChanged();
        if (cart.Lines.Count() == 0)
        {
            DisablePlaceOrderButton = false;
            return;
        }
        ...
}

按钮设计如下：

<button @onclick="@PlaceOrder_Clicked" disabled="@DisablePlaceOrderButton">Place Order</button>

但这不起作用，只有在 PlaceOrder 方法完成执行后按钮才会被禁用。我对 ajax 指示器也有同样的问题，在方法执行后应该显示，完成后应该隐藏，使用 if 块。在这两种情况下，statehaschanged 都没有效果。我使用 Blazor 服务器端预览 9。如何使这些工作？

Answer 1

请阅读来自 mars 的 agua 所做的评论，并按照此代码示例查看它是如何工作的...当您单击按钮时，将调用 DisablePlaceOrder 方法，标题文本会发生变化以反映正在进行的操作，在该按钮被禁用。这发生在 3 秒的时间内，包括重新呈现控件以反映视觉变化。请注意，没有调用 StateHasChanged。

当然，在实际应用中，您不会使用 Task.Delay 方法，而是调用执行密集工作的方法......

<button type="button" @onclick="@PlaceOrder_Clicked" disabled="@DisablePlaceOrderButton">@Title</button>

@code{
    private bool DisablePlaceOrderButton { get; set; } = false;

    public string Title { get; set; } = "Place Order";

    private async Task PlaceOrder_Clicked()
    {

        await DisablePlaceOrder();

        //if (cart.Lines.Count() == 0)
        //{
        DisablePlaceOrderButton = false;
        Title = "Place Order";
        // return;
        //}

    }

    async Task DisablePlaceOrder()
    {
        DisablePlaceOrderButton = true;
        Title = "Wait...";
        await Task.Delay(3000); 

    }
}