Blazor，select for 组件循环中的一个项目和 deselect 其他组件

Question

在 Blazor Webassembly 版本 5 中：

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

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;
}

Blazor，select for 组件循环中的一个项目和 deselect 其他组件

Blazor, select an item in for loop of components and deselect the others

c#

asp.net-core

blazor

blazor-webassembly