Blazor，在组件循环中选择一个项目并取消选择其他项目

Question

在 Blazor Webassembly 版本 5 中：

我有一个for 循环，它遍历数据项以显示它们，用户应该能够通过单击来选择这些项目。实现这一目标的最佳方法是什么？ 我想选择选定的PersonItem，但取消选择其他组件。问题在于取消选择其他人。

PersonItem.Razor：

@if (Person!= null)
{
    <div @onclick="InvokeOnClick" style="@GetStyle()">@Person.Name</div>
}
@code {


    [Parameter] public PersonPerson { get; set; } = null;
    [Parameter] public bool IsSelected { get; set; }=false;
    [Parameter] public EventCallback<Person> OnClick { get; set; }
    private string GetStyle() => IsSelected ? "cursor:default;color:blue" : "cursor:pointer";

    protected override Task OnParametersSetAsync()
    {
        StateHasChanged();
        return base.OnParametersSetAsync();
    }

    private async Task InvokeOnClick()
    {
      IsSelected = true;
      await OnClick.InvokeAsync(Person);
    }
}

MyPage.razor：

@inject IPersonRepo personRepo;



@if (PersonList !)
{
    foreach (var person in PersonList)
    {
        <PersonItem Person="@person"></PersonItem>
    }
}
else
{
    <div>Not Yet!</div>
}


@code {
    public List<Person>? PersonList { get; set; } = null;

    protected async override Task OnInitializedAsync()
    {
        await GetAllPersons(null);
        await base.OnInitializedAsync();
    }


    public async Task GetAllPersons(EventArgs e)
    {
        PersonList = await personRepo.GetAllPersons();
    }
}

Answer 1

您已经拥有了大部分成分。 使用 OnCLick 和 IsSelected 时满足要求：

foreach (var person in PersonList)
{
    <PersonItem Person="@person" 
           OnClick="SelectPerson" 
           IsSelected="person==selectedPerson" />
}

在@code中：

   
Person selectedPerson = null;

void SelectPerson(Person person)
{
   selectedPerson = person;
}