按下回车键后清除MudTextField内容并保持焦点的实现方法

数据老陈

2026-7-13

解决方案

问题分析

你遇到的核心问题有两个：一是Disabled="true"会直接锁死输入框，导致用户无法交互，这明显是配置失误；二是仅设置Barcode = null无法触发UI正确更新，且没有主动维持输入框焦点。

具体实现步骤

修正禁用状态：将Disabled="true"改为Disabled="false"，确保输入框可正常输入。
添加组件引用：给MudTextField加上@ref标记，用于后续调用焦点控制方法。
规范事件方法：把async void改为async Task，避免Blazor UI更新出现异常。
清空+维持焦点：业务逻辑执行完成后，先清空绑定值，再主动调用输入框的焦点方法。

修改后的完整代码

Razor模板部分

<MudTextField Required="true"
    Disabled="false"
    @onkeypress="OnKeyPressed"
    Immediate="true"
    Margin="Margin.Dense"
    @bind-Value="Barcode"
    Label=""
    Variant="Variant.Outlined"
    Adornment="Adornment.Start"
    AdornmentIcon="@Icons.Material.Filled.Person"
    @ref="barcodeTextField">
</MudTextField>

C#逻辑部分

private MudTextField<string> barcodeTextField;
private string Barcode;

public async Task OnKeyPressed(KeyboardEventArgs e)
{
    if (e.Key == "Enter")
    {
        // 执行你的业务逻辑
        // some logic is implemented here
        
        // 清空输入文本（用string.Empty比null更稳定）
        Barcode = string.Empty;
        // 强制维持输入框焦点
        await barcodeTextField.FocusAsync();
    }
}