MudTextField结合MultiMask时程序赋值无法更新UI问题求助

问题场景 #

• 使用带MultiMask的MudTextField实现信用卡卡号自动格式化
• 通过读卡器或程序直接为绑定变量cardNumber赋值后，控件界面无显示
• 手动激活输入框并按下空格键后，卡号正常显示
• 移除MultiMask配置后，程序赋值可正常显示

复现代码 #

@using MudBlazor.Interfaces

<MudGrid Class="justify-space-between mb-3 mx-n3" Style="max-width: 800px;">
    <MudItem xs="12">
        <MudTextField Mask="@mask" Label="Credit Card Number" Style="max-width: 400px;"
                  @bind-Value="cardNumber" Variant="@Variant.Text" Clearable/>
    </MudItem>
    <MudItem xs="12">
        Credit Card: <b>@cardNumber</b>
    </MudItem>

    <MudItem xs="12">
       <MudButton OnClick="@((e)=> HandleClick(e))" Variant="Variant.Filled">Default</MudButton>
    </MudItem>
</MudGrid>

@code {
    string cardNumber, cardType;

    public void HandleClick(MouseEventArgs e)
    {
        cardNumber = "3400 025489 52367";
    }

    MultiMask mask = new MultiMask("0000 0000 0000 0000",
        new MaskOption("American Express", "0000 000000 00000", @"^(34|37)"),
        new MaskOption("Diners Club", "0000 000000 0000", @"^(30[0-59])"),
        new MaskOption("JCB", "0000 0000 0000 0000", @"^(35|2131|1800)"),
        new MaskOption("VISA", "0000 0000 0000 0000", @"^4"),
        new MaskOption("MasterCard", "0000 0000 0000 0000", @"^(5[1-5]|2[2-7])"),
        new MaskOption("Discover", "0000 0000 0000 0000", @"^(6011|65|64[4-9])")
    );
    MaskOption? option = null;
     MudElement element;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        mask.OptionDetected += (o, input) =>
        {
            option = o;
            cardType = o == null ? "Unknown" : o.Value.Id;
            (element as IMudStateHasChanged)?.StateHasChanged();
        };
        
    }
}

问题原因 #

MultiMask的内部处理逻辑仅在用户交互输入时触发掩码格式化和UI同步，外部直接赋值绑定变量时，不会自动触发掩码的解析与控件的文本更新流程，导致控件界面未同步显示赋值内容。

解决方案 #

通过为MudTextField添加引用，手动触发文本设置和状态更新：

1. 给MudTextField添加@ref="creditCardTextField"获取控件实例
2. 在赋值卡号后，调用creditCardTextField.SetTextAsync()方法，触发MultiMask的格式化处理
3. 调用StateHasChanged()确保UI刷新

修改后的完整代码：

@using MudBlazor.Interfaces
@using MudBlazor

<MudGrid Class="justify-space-between mb-3 mx-n3" Style="max-width: 800px;">
    <MudItem xs="12">
        <MudTextField @ref="creditCardTextField" Mask="@mask" Label="Credit Card Number" Style="max-width: 400px;"
                  @bind-Value="cardNumber" Variant="@Variant.Text" Clearable/>
    </MudItem>
    <MudItem xs="12">
        Credit Card: <b>@cardNumber</b>
    </MudItem>

    <MudItem xs="12">
       <MudButton OnClick="@HandleClick" Variant="Variant.Filled">Default</MudButton>
    </MudItem>
</MudGrid>

@code {
    string cardNumber, cardType;
    private MudTextField<string>? creditCardTextField;

    public async Task HandleClick(MouseEventArgs e)
    {
        cardNumber = "340002548952367"; // 可传入无空格的原始卡号，MultiMask会自动格式化
        if (creditCardTextField != null)
        {
            await creditCardTextField.SetTextAsync(cardNumber);
            StateHasChanged();
        }
    }

    MultiMask mask = new MultiMask("0000 0000 0000 0000",
        new MaskOption("American Express", "0000 000000 00000", @"^(34|37)"),
        new MaskOption("Diners Club", "0000 000000 0000", @"^(30[0-59])"),
        new MaskOption("JCB", "0000 0000 0000 0000", @"^(35|2131|1800)"),
        new MaskOption("VISA", "0000 0000 0000 0000", @"^4"),
        new MaskOption("MasterCard", "0000 0000 0000 0000", @"^(5[1-5]|2[2-7])"),
        new MaskOption("Discover", "0000 0000 0000 0000", @"^(6011|65|64[4-9])")
    );
    MaskOption? option = null;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        mask.OptionDetected += (o, input) =>
        {
            option = o;
            cardType = o == null ? "Unknown" : o.Value.Id;
            StateHasChanged();
        };
        
    }
}

额外说明 #

• 赋值时传入无格式的原始卡号，MultiMask会自动匹配对应信用卡类型的格式规则进行显示
• SetTextAsync()方法会触发掩码的解析逻辑，确保控件文本与绑定变量同步

内容的提问来源于stack exchange，提问作者Dhaval Bhatt