删除动态创建的组件总是从列表中删除最后一项

Question

我正在用Blazor WebAssembly实现一个简单的钉板。当用X按钮移除任何卡片时，它总是列表中最后一个被移除的元素。

@foreach (var item in _cards)
{
<div class="card-title">
<input type="text" id="@item.TitleElementId" value="@item.Title" />
<button class="btn-remove" @onclick="() => RemoveCard(item)">X</button>
</div>
}
<button class="btn-add" @onclick="AddNewCard">+</button>
@code {
private List<Card> _cards = new List<Card>();
private void AddNewCard()
{
_cards.Add(new Card());
}
private void RemoveCard(Card card)
{
_cards.Remove(card);
// Also tried _cards.RemoveAll(i => i.TitleElementId == card.TitleElementId);
}
}

Answer 1

我注意到，只有在修改了卡中某些输入的值后，才会发生这种情况。

事实证明，这是值绑定的一个问题。我需要使用Blazor的@bind-""，而不是默认的htmlvalue=""。不幸的是，我不知道为什么会发生这种情况。

所以不是

<input type="text" value="item.Title"/>

我换了

<input type="text" @bind="item.Title"/>

一切都按预期进行。

Answer 2

在for循环中，使用记录唯一标识符添加@key="item.TitleElementId"属性，以迫使Blazor将html控件映射到C#项id。

<input @key="item.TitleElementId" type="text" id="@item.TitleElementId" value="@item.Title" />
<button @key="item.TitleElementId" class="btn-remove" @onclick="() => RemoveCard(item)">X</button>