Blazor EditForm失去了对数据绑定的关注

Question

当用户单击向上或向下箭头时，我需要将新数据加载到表单中。期望的是，无论哪个单元格有焦点，都会在加载新数据后保留焦点。

下面的代码可以捕获键盘输入，并使用数据绑定将正确的记录加载到我的表单中。然而，我发现，一旦绑定了新数据，表单就会失去焦点。

MyComponent剃刀：

<span @onkeypress="@KeyHandler" @onkeydown="@KeyHandler">
<EditForm Model="@CurrentRecord">
<DataAnnotationsValidator />
<ValidationSummary />
@Content
</EditForm>
</span>
@code {
[Parameter]
public RenderFragment Content { get; set; }
public List<MyModel> Data { get; set; } = new List<MyModel>();
private int currentIndex;
protected async Task KeyHandler(KeyboardEventArgs e)
{
if (e.Key == "DownArrow") await LoadNextRecord();
}
async Task LoadNextRecord()
{
CurrentRecord = Data.ElementAt(++currentIndex);
// Form loses focus here!!
}
}

现在，我可以实现一个简单的javascript，以便在重新绑定数据时聚焦第一个元素。但我的要求是保持焦点。我找不到一种通用的方法来获得焦点元素，然后重新聚焦，而不必为表单中的每个元素分配一个Id或@ref。

有其他方法可以解决这个问题吗？

Answer 1

有其他方法可以解决这个问题吗？

不，没有。。。没有通用的方法可以做到这一点，现在不行，在不久的将来也可能不行。

目前，您最多可以在Blazor中设置输入的焦点，如下所示：

<button @onclick="() => textInput.FocusAsync()">Set focus</button>
<input @ref="textInput"/>

请注意，上面的代码片段仅适用于Asp.Net Core 5.0(预览版(。

我能提出的唯一解决方案是设计一种方法来发现最后有焦点的输入元素，然后从OnAfterRender/Async方法重新聚焦它。您必须将@ref指令应用于每个输入元素或id属性。没有其他方法可以做到这一点。