MudTextField通过代码修改值不更新问题求助

方案1：异步触发状态更新 #

把同步的OnKeyUpHandler改成异步方法，确保状态更新能被Blazor的渲染周期正确捕获：

private async Task OnKeyUpHandler(KeyboardEventArgs args)
{
    if (args.Key == " " && !string.IsNullOrWhiteSpace(InputValue))
    {
        var email = InputValue.Trim();
        if (!string.IsNullOrWhiteSpace(email) && !_chips.Contains(email))
        {
            _chips.Add(email);
        }
        InputValue = string.Empty;
        await InvokeAsync(StateHasChanged);
    }
}

对应的组件事件绑定也要改成异步方法引用：

<MudTextField Immediate="true" @bind-Value="InputValue" Placeholder="Enter email address and press space..." OnKeyUp="@OnKeyUpHandler" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Email"/>

方案2：通过组件引用直接操作 #

给MudTextField添加引用，直接调用组件的清空方法，绕过绑定同步的问题：

首先在@code中声明引用：

private MudTextField<string> _emailInput;

修改组件标记：

<MudTextField @ref="_emailInput" Immediate="true" @bind-Value="InputValue" Placeholder="Enter email address and press space..." OnKeyUp="OnKeyUpHandler" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Email"/>

更新事件处理逻辑：

private void OnKeyUpHandler(KeyboardEventArgs args)
{
    if (args.Key == " " && !string.IsNullOrWhiteSpace(InputValue))
    {
        var email = InputValue.Trim();
        if (!string.IsNullOrWhiteSpace(email) && !_chips.Contains(email))
        {
            _chips.Add(email);
        }
        InputValue = string.Empty;
        _emailInput.Clear();
    }
}

方案3：移除Immediate属性（若业务允许） #

如果不需要实时同步输入值，去掉Immediate="true"后，Blazor会自动处理绑定值的UI同步：

<MudTextField @bind-Value="InputValue" Placeholder="Enter email address and press space..." OnKeyUp="OnKeyUpHandler" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Email"/>

问题根源 #

Immediate="true"会让MudTextField在每个按键事件中立即同步绑定值到内部状态，此时在KeyUp事件中修改绑定值，会和组件自身的状态更新逻辑冲突，导致UI没有同步。上述方案通过异步触发渲染或直接操作组件实例，强制同步UI与绑定值的状态。

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