blazor - 如何告诉或允许 Blazor 将 HTML 元素从其未更改的绑定(bind)值变为 "refresh"？

Question

当我在 HTML 元素上进行单向绑定(bind)并在 onchange 上进行附带绑定(bind)时，该绑定(bind)并不总是会更改它，那么我如何告诉或允许 Blazor“刷新”该元素的值从它没有改变的绑定(bind)值？

StateHasChanged() 不起作用，可能是因为 Blazor 检测到没有发生任何更改。

极简但荒谬的示例(请注意，现实世界的案例并不荒谬):

@page "/"
<select value="@Foo" @onchange="Update">
  <option>First</option>
  <option>Second</option>
</select> 
<div>
  Value of Foo: @Foo
</div>
@code {
  private string Foo {get;set;} = "First";
  private void Update(ChangeEventArgs args) {
    return; // doesn't actually change it
  }
}

因此，HTML 元素中的新值在更改时立即显示，但绑定(bind)值实际上从未更改。 Working demo here :如何使下拉列表的值保持(或更改回)“First”，即存储在 Foo 中的未更改值？

Answer 1

最简单的方法是为元素提供一个@key，当您想要强制刷新时可以更改该值。但这将完全拆除并重新创建元素，因此成本可能很高。

@page "/"

<select @key="@Forced" value="@Foo" @onchange=@( e => Update(e) )>
  <option>(none)</option>
  <option>First</option>
  <option>Second</option>
</select> 

@code {
  private string Foo {get;set;} = "First";
  private int Forced {get;set;} = 0;
  private Task Update(ChangeEventArgs args) {
    if (1 == 1){ // placeholder for other logic 
      Forced++; // doesn't actually change it
    }
    else
    {
      Foo = args.Value.ToString() ?? "(none)";
    }
    return Task.CompletedTask; 
  }
}

Updated demo