将禁用属性传递给子组件中的 HTML 元素不起作用

Question

我有一个 Blazor 组件，需要将布尔值传递给其子组件，以在提交时禁用表单提交按钮。

<EditForm Model="Model" OnValidSubmit="SubmitSearch">
   <div class="panel-body">
      <ChildComponent IsSubmitting="@IsSubmitting"/>
   </div>
</EditForm>

我的子组件只是一系列带有提交按钮的输入

<div>

   // inputs etc.

   <span class="pull-left">
      <button class="btn btn-success" type="submit" disabled="@IsSubmitting">
          Submit Search
      </button>
   </span>

</div>

@code {
   [Parameter]
   public bool IsSubmitting { get; set; }
}

我的提交方法像这样设置 IsSubmitting

public async void SubmitSearch()
{
   IsSubmitting = true;

   var result = await Service.GetStuff();

   // do stuff with result

   IsSubmitting = false;
}

我注意到该按钮永远不会禁用。我是否缺少某种生命周期挂钩来在参数更新时触发重新渲染？

任何帮助表示赞赏。

Answer 1

我在这里的最后一个答案中找到了一个解决方案：如何在 Blazor 中单击后立即禁用/隐藏按钮？

尽管SubmitSearch是一个异步方法，但它对后端服务的调用在很大程度上是同步的。

正如@HenkHolterman 在该答案中所说，除非方法调用是纯异步的，否则不会更新 GUI。

所以我创建了一个异步任务调度器，如下所示：

    async Task DispatchSubmit()
    {
        IsSubmitting = true;

        await Task.Delay(1);  // allow the GUI to catch up
        await SubmitSearch();

        IsSubmitting = false;
    }

修复了一切！