提交后让 Blazor InputText 保持焦点答案

【问题标题】：Have Blazor InputText keep focus after submitting提交后让 Blazor InputText 保持焦点
【发布时间】：2020-06-03 19:02:51
【问题描述】：

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

每当我按 Enter 键时，消息都会正确发送和接收。不幸的是，焦点也走到哪里。这不会让您在聊天中快速输入多条消息。

我想我可以创建一个 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.");
}

【问题讨论】：

截至我上次检查时，JS 互操作是 SetFocus 的方式。只需确保在设置焦点之前呈现目标元素。作为一个想法，在我正在进行的一个项目中，我构建了一个非常小的服务，它通过 DI 获取 IJSRuntime 并公开了几个方法，其中一个是焦点。所有这些都是封装了 JS 方法，所以通过 c# 代码更容易访问。要使用它，我传入一个元素 id 并在执行后设置焦点，非常简单并且不需要很多工作来设置。这可能是你的票。

标签： forms focus blazor

【解决方案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.");
}

我对@987654322@ 做了一些试验，但我无法让它发挥作用。

【讨论】：

很好，我下班后要试试这个！您认为替换整个消息会使树重新呈现吗？我对使用这种方法非常满意。或者我使用结构，这会使复制成为固有的。
是的，它有效。我做了一个小测试。模型的身份在这里被迷住了。