Blazor 组件虚拟化 - 保留状态答案

【问题标题】：Blazor component virtualization - preserve stateBlazor 组件虚拟化 - 保留状态
【发布时间】：2021-09-20 14:07:15
【问题描述】：

我有一份员工名单（大约 500 人）。在一个组件中，我想显示这个列表。我将列表显示为表格。每个单独的行都在一个组件中定义。用户可以按需在线编辑数据行。为此，当用户想要编辑数据时，我会插入一个输入字段。下面举例说明我目前的解决方案：

<!--Parent Component-->
<table>
  <thead>[...]</thead>
  <tbody>
    <Virtualize Items="employeeData">
      <TableRow rowModel="context" />
    </Virtualize>
  </tbody>
</table>
  
<!--Child Component-->

@if(IsInEditMode)
{
  <tr>    
    <td><input @bind="@employee.name" /></td>
    <td>...</td>
    <td><button @onclick="SaveData">Save</button>
  </tr>
}
else 
{
  <tr>    
    <td>@employee.name</td>
    <td>...</td>
    <td><button @onclick="EnableEditing">Edit</button>
  </tr>
}

我引入了虚拟化，因为我注意到在输入字段中输入时出现了很大的延迟。使用虚拟化，打字又可以正常工作了。

结果我注意到了以下问题：

当我滚动到视线之外时，行会被重置 - 插入的数据会丢失并且编辑模式会关闭。我的猜测是这种情况正在发生，因为该行被重新渲染并且默认情况下编辑已关闭。

如何在使用虚拟化功能时保持特定组件的状态？

【问题讨论】：

我可以建议一个包含每个项目值的状态包装器吗？

标签： .net-core blazor blazor-server-side

【解决方案1】：

问题似乎是虚拟化在渲染子组件时出现问题。将子组件集成到父组件中解决了这些问题。我将尝试进一步调查这是我的组件的问题还是 Blazor 的虚拟化问题。

【讨论】：