Forms 提交后让Blazor InputText保持焦点

我正在为我的Blazor应用程序构建一个聊天小部件。它也可以工作，但是为了让它工作得更流畅，我想在提交一条消息后将焦点放在InputText中

每当我按enter键时，消息都会正确发送和接收。不幸的是，焦点也无处不在。这不允许您在聊天中快速键入多条消息

我想我可以使用JS互操作方法将焦点发送回InputText，并在每次提交后调用它，但我更愿意找到一个无JS的解决方案

我的建议是：

<EditForm Model="message" OnSubmit="SendMessage">
    <InputText type="text" @bind-Value="message.Message" />
</EditForm>

---

这通常不会发生在HTML表单中。焦点丢失是由树的重新渲染引起的

作为一种解决方法，并非真正的漂亮：

private async Task SendMessage()
{
    Console.WriteLine("Send message " + message.Message);
    var copy = new Library.Models.ChatMessage { Message = message.Message };
    var t = Service.SendMessage(copy);
    messages.Add(copy); 
    // message = new Library.Models.ChatMessage(); -- this was the problem
    message.Message = "";
    await t;
    Console.WriteLine("Sending finished.");
}

---

我用

@key

做了一点实验，但没能成功

在我上次检查时，JSInterop是SetFocus的最佳选择。只需确保在设置焦点之前渲染了目标元素。作为一种想法，在我正在进行的一个项目中，我建立了一个非常小的服务，它通过DI获取IJSRuntime，并公开了两种方法，其中一种是focus。所有这些都是对JS方法的包装，因此更容易通过c#代码进行访问。为了使用它，我传入一个元素id，并在执行后设置焦点，非常简单，而且不需要进行大量设置。这可能是你的票。很好，我下班后会试试这个！你认为替换整个消息会让树重播吗？我非常乐意使用这种方法。或者我使用一个结构，这将使复制成为固有的。是的，它可以工作。我做了一个小测试。有些东西与模型的身份有关。

private async Task SendMessage()
{
    Console.WriteLine("Send message " + message.Message);
    var copy = new Library.Models.ChatMessage { Message = message.Message };
    var t = Service.SendMessage(copy);
    messages.Add(copy); 
    // message = new Library.Models.ChatMessage(); -- this was the problem
    message.Message = "";
    await t;
    Console.WriteLine("Sending finished.");
}