Blazor 当源项发生更改时，为什么不调用foreach循环中的@onclick回调？

我在

foreach

循环中有一个带有

@onclick

eventhandler的div列表：

<input @onblur="RefreshFilteredItems">
@foreach(var item in FilteredItems)
{
    <div @onclick="_ => OnItemClick(item)" key="@item">@item</div>
}

@code {
   RefreshFilteredItems()
   {
     FilteredItems = AllItems; 
   }
}

@foreach（FilteredItems中的变量项）
{
@项目
}
@代码{
RefreshFilteredItems（）
{
FilteredItems=所有项；
}
}

当用户单击

时，将按预期调用OnItemClick

但是，当输入首先被聚焦并且用户单击其中一个div时，将调用@onblur并忽略@onclick

原因是，在OnItemClick更改FilteredItems集合之前调用的RefreshFilteredItems

为什么只调用onblur回调而不调用onclick

如何处理单击事件

这里是一个简化的演示

---

OnBlur

正在替换DOM，而单击永远不会到达新的div，因为单击是在新列表存在之前发送的。也不会到达旧列表，因为

OnBlur

将其删除

Users enters 'c' on input box.
User clics on list item:
   - OnBlur is executed, the list is replaced
   - Click event is lost because old list not exists

这很容易检查，只需将您当前的

OnBlur

替换为此剪接，此

OnBlur

延迟列表替换，以便有时间单击列表项：

异步任务OnBlur（）{

---

等待任务。延迟（100）；//如果列表不太大，我会将值输入绑定到setter也调用RefreshFilteredItems的属性。这样，您将避免使用onblur，并且您的筛选列表将始终是最新的。此外，您可以对其进行微调，以允许用户在刷新之前编写整个搜索查询。@JanBejvl:也就是说不是我的场景。我确实使用了@@oninput进行实时筛选，并在@@onlur中重置了筛选。请检查回复。我可以问一下动机吗，为什么要尝试刷新这样的筛选项目？项目单击将带您去哪里？从用户界面来看，搜索栏中有一些查询，但结果不是筛选出来的，这不是很糟糕吗d（在onblur之后）？也许我们可以找到另一种方法..脱离主题，但我的场景是一个包含许多项的组合框。您可以通过键入文本框筛选项，然后选择项。但是，当组合框失去焦点时，应该重置筛选器。这是许多组合框的标准行为。我想，我会尝试：使用Ispened属性，然后组合框包装器div的onfocus句柄（tabindex可聚焦）.On focus将设置为true并显示筛选的项。还可以使用jsinterop注册文档onclick，其中如果单击的节点是combobox包装的子节点，则进行比较。如果该节点不是子节点，则从js调用combobox组件，在该组件中可以执行所有需要设置为false的操作，刷新状态。但我仍然没有在更新的想法，我认为ComboxoE有这个小十字图标，用来重置搜索的查询..是的，问题是，这在Blazor服务器端是非常有问题的，因为延迟可能会更大。顺便说一句，它也不起作用。尝试键入“C”，然后单击第三项。你必须使用async void而不是async Task，以便e eventhandler未在等待Liero，抱歉，我的英语太差了，您很难理解。我发布了一个屏幕记录，单击第3项并选择它。这不是预期的行为？问候。抱歉，我的不好：（当您键入“C”时，第三项确实有效。第四项无效。原因是，当您键入“C”时，前三项在onblur前后均保持不变。第四项“10 ABCD”替换为“4 EFGH”。请注意，未选中“10 ABCD”

Users enters 'c' on input box.
User clics on list item:
   - OnBlur start execution with 100 milliseconds delay
   - Click event arrives to the old list
   - OnBlur finish replacing the list