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

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

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

MyComponent.razor:

<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!!
}
}

@内容
@代码{
[参数]
公共呈现片段内容{get；set；}
公共列表数据{get；set；}=new List（）；
私有int-currentIndex；
受保护的异步任务密钥处理程序（KeyboardEventArgs e）
{
如果（e.Key==“向下箭头”）等待LoadNextRecord（）；
}
异步任务LoadNextRecord（）
{
CurrentRecord=Data.ElementAt（++currentIndex）；
//表单在此失去焦点！！
}
}

现在，我可以实现一个简单的javascript，以便在数据重新绑定时关注第一个元素。但我的要求是把焦点放在它所在的地方。我无法找到一种通用的方法来获取聚焦元素，然后在不为表单中的每个元素分配Id或@ref的情况下重新聚焦

还有别的办法解决这个问题吗

还有别的办法解决这个问题吗

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

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

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

设置焦点

请注意，上面的代码片段仅在Asp.NETCore5.0（预览版）中可用

---

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

当你说“新数据绑定后表单就会失去焦点”你的意思是输入会失去焦点，对吗？根据我上面的代码，当我设置CurrentRecord时，表单会重新呈现。当这种情况发生时，我的输入会失去焦点。例如，我想在RenderAsync之后将焦点保持在原来的位置（或将焦点放回同一单元格），但我不确定为什么会发生这种情况，但我认为这是因为您使用的是

RenderFragment

，请尝试将表单直接传递到

MyComponent

中。我尝试将表单内容直接放入MyComponent（并注释掉@content），可能会起作用。行为是一样的。当窗体重新呈现时，焦点会消失。请尝试不要直接更改

CurrentRecord

，而只更改其属性。在这种情况下，AutoMapper将非常有用。我认为它正在失去焦点，因为它正在更改

CurrentRecord

的引用，但是如果您只更改属性值，可能不会。Hi-enet，感谢您澄清这些选项。我也会看看你推荐的预览API。