时间戳

首页 > 解决方案 > 奇怪的复选框@onchange 处理行为

c# - 奇怪的复选框@onchange 处理行为

问题描述

在我的（服务器端）blazor 页面之一中，我具有以下构造：

  1. 每行有一个复选框（除其他外）的表格
  2. 该复选框有一个 onchange 处理程序，它将在一个星座中从“SelectableElements”集合中删除一个未选中的元素：
@foreach (ViewModels.Element element in SelectableElements)
{
    <tr>
        <td>
            <input type="checkbox" checked="@IsChecked(element)" @onchange="(e) => OnCheckedChange(element, e)">
        </td>       
        <td>
            @element.Name
        </td>
    </tr>
}

// ...

protected void OnCheckedChange(Element element, ChangeEventArgs e)
{
    if (!(bool)e.Value)
    {
        SelectableElements.Remove(element);
    }    
}

当检查元素未选中时，它将从表中消失。但是，在重新渲染后，已删除行下方的行将取消选中其复选框，这不是我想要的，我不确定为什么会这样？我可以在调试器中看到 IsChecked(...) 为未检查的元素返回 true。

标签： c#blazor-server-side

解决方案

我最终让它工作的方式是这样的：

<input type="checkbox" checked="@IsChecked(element)" @onclick:preventDefault @onclick="(e) => OnCheckedChange(element)">

这样我就可以自己处理点击，而无需通过默认行为设置复选标记。

推荐阅读