在我的 Blazor 服务器端应用程序中，我希望当用户单击页面上的某个位置时，最后一个聚焦的按钮应再次重新聚焦

Question

在我的 Blazor 服务器端应用程序中，我的 razor 页面中有按钮，可打开相关子页面。当单击按钮时，它会获得我的 css 中定义的焦点样式。当用户单击页面中的其他位置（但不是另一个按钮）时，最后单击的按钮将失去焦点。我希望当单击其他地方然后单击按钮时，最后单击的按钮应立即再次重新聚焦。

为了实现这一目标，我尝试了以下方法，但没有成功：

<button class="icon-button" onblur="this.focus();" @onclick="SubPage1">

解决办法是什么？

Answer 1

您可以尝试动态使用css。为按钮创建实体以控制焦点状态。

<style>
    .unfocus {
        background-color: lightgray;
    }
    .focus {

        background-color: purple; 
    }
</style>

@foreach (var item in myButtons)
{
        <button class="@(item.Focus?"focus":"unfocus")" @onfocus="@(()=>{myButtons.ForEach(x=>x.Focus=false);item.Focus=true;})" @onclick="()=>{SubPage1(item.Id);}">@item.Id </button>
}

@code {
    List<MyButton> myButtons = new List<MyButton>{
        new MyButton{Id="buttonA"},
        new MyButton{Id="buttonB"},
        new MyButton{Id="buttonC"}
    };
    private void SubPage1(string buttonId)
    {
        Console.WriteLine($"{buttonId} is clicked");
    }
    public class MyButton
    {
        public string Id { get; set; }
        public bool Focus { get; set; } = false;
    }
}