Blazor中MudCheckBox的@onclick早于@bind触发如何获取正确绑定值

问题原因 #

Blazor中DOM原生@onclick事件的触发优先级高于控件的绑定值更新逻辑，你绑定的回调执行时，@bind-Checked对应的赋值操作还没执行，因此拿到的是更新前的旧值。页面显示正常是因为后续值更新后触发了组件重渲染。

解决方法 #

推荐优先使用以下第一种方案，符合Blazor组件的绑定设计规范：

• 方案1：拆分@bind-Checked语法，手动处理值更新和回调逻辑
  不使用@bind简写，手动绑定Checked属性和CheckedChanged事件，保证先更新值再执行业务逻辑：

  <div>
      <MudCheckBox Checked="@testCheck" 
                   Color="Color.Secondary" 
                   CheckedChanged="HandleCheckChanged">
      </MudCheckBox>
      <p>Value: @testCheck</p>
  </div>
  
  @code {
      private bool testCheck { get; set; } = false;
      
      private void HandleCheckChanged(bool? newValue)
      {
          // 先更新绑定值，未开启三态时newValue不会为null
          testCheck = newValue ?? false;
          // 再执行业务逻辑，此时拿到的就是最新值
          MessageBox.Show(testCheck.ToString());
          
          if(testCheck)
          {
              // 你的业务逻辑
          }
      }
  }
  

• 方案2：保留@onclick，异步等待状态更新完成
  如果必须保留@onclick绑定，可以将处理方法改为异步，等待Blazor完成状态更新后再取值：

  <div>
      <MudCheckBox @bind-Checked="@testCheck" 
                   Color="Color.Secondary" 
                   @onclick="ChecktestBox">
      </MudCheckBox>
      <p>Value: @testCheck</p>
  </div>
  
  @code {
      private bool testCheck { get; set; } = false;
      
      private async Task ChecktestBox()
      {
          // 等待Blazor完成绑定值更新的同步操作
          await Task.Yield();
          // 此时取值为最新状态
          MessageBox.Show(testCheck.ToString());
          
          if(testCheck)
          {
              // 你的业务逻辑
          }
      }
  }
  

内容的提问来源于stack exchange，提问作者Brian Brince