Blazor组件按钮高亮异常：选中按钮高亮，其余取消高亮

按钮高亮失效的核心原因是子组件仅在初始化时计算一次样式，后续父组件传入的SelectedId参数更新时，子组件没有重新执行样式判断逻辑。OnInitializedAsync生命周期方法只在组件第一次加载时执行，当父组件选中新对象后，子组件的SelectedId参数发生变化，但不会触发重新调用CheckIfSelected，导致样式无法同步更新。

修改TestComponent.razor，添加OnParametersSet生命周期方法，在参数更新时重新检查选中状态并更新样式：

<button @onclick="Click" class="test" style="@styles">
    @Text
</button>

@code {
    [Parameter] public int Id { get; set; }
    [Parameter] public string Text { get; set; }
    [Parameter] public bool Selected { get; set; }
    [Parameter] public int SelectedId{ get; set; }
    [Parameter] public EventCallback<int> CallBack { get; set; }

    private string styles = "";

    protected override void OnInitialized()
    {
        CheckIfSelected();
    }

    // 参数更新时重新计算样式
    protected override void OnParametersSet()
    {
        CheckIfSelected();
    }

    private void Click()
    {
        CallBack.InvokeAsync(Id);
    }

    private void CheckIfSelected()
    {
        styles = Id == SelectedId ? "background-color: grey;" : "background-color: white;";
    }
}

1. 用CSS类替代内联样式，更易维护：
   在全局样式或父页面中定义：

   .test-btn { background-color: white; }
   .test-btn.selected { background-color: grey; }
   

   子组件简化为：

   <button @onclick="Click" class="test-btn @(Id == SelectedId ? "selected" : "")">
       @Text
   </button>
   

   可直接去掉styles变量和CheckIfSelected方法，代码更简洁。

2. 基于Selected字段的实现方式（可选）：
   父组件初始化时设置第一个对象的选中状态：

   SelectedTestObject = TestObjects[0];
   SelectedTestObject.Selected = true;
   

   选中新对象时重置所有状态：

   private void SelectObject(int SelectedId)
   {
       foreach(var obj in TestObjects)
       {
           obj.Selected = obj.Id == SelectedId;
       }
       SelectedTestObject = TestObjects.First(t => t.Id == SelectedId);
       StateHasChanged();
   }
   

   子组件直接通过Selected参数判断样式：

   styles = Selected ? "background-color: grey;" : "background-color: white;";
   

内容的提问来源于stack exchange，提问作者Chris Crawshaw