Blazor 服务器 - MudBlazor - MudTextField 绑定值未更新

Question

MudTextField 绑定到变量 chatInput。 一旦用户输入查询并按 Enter 键，就会调用 HandleKeyUp()。 在该方法中，我们获取查询的值，然后清除该字段并尝试更新状态。 绑定到该字段的变量在调试中更改为空值，但 UI 不会清除文本。 我们希望文本清晰，以便用户可以更轻松地在其中键入另一个查询。

技术堆栈：Blazor 服务器、MudBlazor、C#。

// Clear the input
   chatInput = string.Empty;
  
// Trigger UI update to clear the input field
   await InvokeAsync(StateHasChanged);

//Part of the MudBlazor element
 MudTextField @bind-Value="chatInput" Placeholder="Type a message"
 @bind-Value:after="@(() => InvokeAsync(StateHasChanged))"  
 @onkeyup="HandleKeyUp"

Answer 1

这是一个可能的解决方法，无需 JavaScript。看来你可以通过让视野松散焦点来让它发挥作用，然后再把它放回来。看来它更新了。

<MudTextField @ref="messageField" @bind-Value="@chatInput" Placeholder="Type a message" OnKeyUp="HandleKeyUp"/>

@code {
    private string chatInput = string.Empty;
    private MudTextField<string> messageField = default!;

    private async Task HandleKeyUp(KeyboardEventArgs e)
    {
        if (e.Key == "Enter")
        {
            var result = await SendChatMessage(chatInput);
            if (result)
            {
                await messageField.BlurAsync();
                chatInput = "";
                StateHasChanged();
                await messageField.FocusAsync();
            }
        }
    }

    private ValueTask<bool> SendChatMessage(string message)
    {
        // Send message to server
        return ValueTask.FromResult(true);
    }
}

我自己也很挣扎，但在这里找到了解决方法： https://stackoverflow.com/a/77290588/3616319