提交后让 Blazor InputText 保持焦点

Question

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

只要我按回车键，消息就会正确发送和接收。不幸的是，焦点也无处不在。这不会让您在聊天中快速输入多条消息。

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

我的 Razor 标记是这样的：

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

我这样发消息：

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

Answer 1

这通常不会出现在 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 进行了一些试验，但无法正常工作。

提交后让 Blazor InputText 保持焦点

Have Blazor InputText keep focus after submitting

forms

focus

blazor