Blazor EditForm 不再关注数据绑定答案

【问题标题】：Blazor EditForm loses focus on data bindingBlazor EditForm 不再关注数据绑定
【发布时间】：2021-01-02 11:48:44
【问题描述】：

当用户单击向上或向下箭头时，我需要将新数据加载到我的表单中。并且期望是任何具有焦点的单元格，在加载新数据后保持焦点。

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

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

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

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

【问题讨论】：

当您说“一旦绑定新数据，表单就会失去焦点”，您的意思是输入失去焦点，对吧？
根据我上面的代码，当我设置 CurrentRecord 时，表单会重新呈现。发生这种情况时，我的输入就会失去焦点。例如，我想将焦点保持在原处（或将焦点放回同一单元格）AfterRenderAsync
不知道为什么会这样，但我认为这是因为您使用的是RenderFragment，请尝试直接在MyComponent 中传递表单。也许它会工作
我尝试将表单内容直接放入 MyComponent（并注释掉 @Content）。行为是一样的。当表单重新渲染时，焦点消失了。
尽量不要直接改变CurrentRecord，而只改变它的属性。 AutoMapper 在这种情况下会很有用。我认为它正在失去焦点，因为它正在更改 CurrentRecord 的引用，但如果你只更改属性值，也许它不会。

标签： javascript blazor blazor-jsinterop

【解决方案1】：

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

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

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

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

请注意，上面的代码 sn-p 仅适用于 Asp.Net Core 5.0（预览版）。

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

【讨论】：

您好，enet，感谢您澄清选项。我也会查看您推荐的预览 API。