如何在 blazor 中突出显示选定的列表项？答案

【问题标题】：How to highlight selected list item in blazor?如何在 blazor 中突出显示选定的列表项？
【发布时间】：2021-10-29 03:16:52
【问题描述】：

我在 razor 组件中创建了一个简单列表。它是一个带有 foreach 循环的简单 HTML 列表。

<ul>
           @foreach (var itm in matchingLocations)
           {
            <li>
                <div class="d-flex">

                    <div class="py-2 pr-2">
                        <i class="fas fa-map-marker-alt text-glow-1"></i>
                    </div>
                    <div class="py-2"><span class="sub-title-2">@itm.CodeName</span></div>
                   
                </div>

            </li>

            
            }
       
    </ul>

现在我需要将以下 2 个功能添加到列表中

当点击一个列表项时，它应该被突出显示。
如果我们想点击另一个项目，当一个项目已经突出显示时，当前突出显示的项目应该被取消突出显示并且单击的项目应突出显示。

。我怎样才能使用 blazor 做到这一点？哪位知道这方面的，请帮帮我。

【问题讨论】：

您将需要某种状态管理来了解某个项目是否已被点击。恕我直言，最简单的方法是将其分解为每个项目的子组件，并将其用作每个项目的状态容器。
对不起，我无法清楚地理解您要做什么。

标签： css razor blazor

【解决方案1】：

有很多方法可以做到这一点。这是一个演示页面：

@page "/"
@foreach (var item in Countries)
{
    <div class="@DivCss(item) p-2" @onclick="() => SetSelect(item)">
        @item.Name
    </div>
}

@code {

    List<Country> Countries = new List<Country>
{
        new Country { Name = "Australia"},
        new Country { Name = "Spain"},
        new Country { Name = "Croatia"}
    };

    List<Country> SelectedCountries = new List<Country>();

    class Country
    {
        public string Name { get; set; }
    }

    bool IsSelected(Country country)
        => SelectedCountries.Any(item => item == country);

    string DivCss(Country country)
        => IsSelected(country) ? "bg-success text-white" : "bg-light";

    void SetSelect(Country country)
    {
        if (IsSelected(country))
            SelectedCountries.Remove(country);
        else
            SelectedCountries.Add(country);
    }
}

【讨论】：